텍스트 애니메이션 소스 질문
본문
텍스트 애니메이션을 적용해 보려고 합니다.
아래 소스를 보면 제일 아랫부분 롤링되는 텍스트가
wOrK , lifeStyle , Everything 이렇게 3개가 있는데요.
만약 이 부분을 단어를 추가해서 3개가 아닌 여기를 5개로 돌아가게
하려면 어느 부분을 어떻게 조정해야 할까요?
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:700');
body {
margin:0px;
font-family:'Roboto';
text-align:center;
}
#container {
color:#999;
text-transform: uppercase;
font-size:36px;
font-weight:bold;
padding-top:200px;
position:fixed;
width:100%;
bottom:45%;
display:block;
}
#flip {
height:50px;
overflow:hidden;
}
#flip > div > div {
color:#fff;
padding:4px 12px;
height:45px;
margin-bottom:45px;
display:inline-block;
}
#flip div:first-child {
animation: show 5s linear infinite;
}
#flip div div {
background:#42c58a;
}
#flip div:first-child div {
background:#4ec7f3;
}
#flip div:last-child div {
background:#DC143C;
}
@keyframes show {
0% {margin-top:-270px;}
5% {margin-top:-180px;}
33% {margin-top:-180px;}
38% {margin-top:-90px;}
66% {margin-top:-90px;}
71% {margin-top:0px;}
99.99% {margin-top:0px;}
100% {margin-top:-270px;}
}
p {
position:fixed;
width:100%;
bottom:30px;
font-size:12px;
color:#999;
margin-top:200px;
}
</style>
<div id=container>
Make
<div id=flip>
<div><div>wOrK</div></div>
<div><div>lifeStyle</div></div>
<div><div>Everything</div></div>
</div>
AweSoMe!
</div>
답변 2
태그만 추가하면 될것 같습니다.
<div id=flip>
<div><div>wOrK</div></div>
<div><div>lifeStyle</div></div>
<div><div>Everything</div></div>
<div><div>Other1</div></div>
<div><div>Other2</div></div>
</div>