css 애니메이션 질문입니다
본문
css를 활용하여 텍스트가 변경되는 ui를 만들고 있습니다.
1 다음으로 2 그다음 다시 1로 가고 2로 가고 이런식으로 하고싶은데 1에서 2로 가면 애니메이션 효과가 끝나버리네요ㅠㅠ
코드를 어떻게 수정해야할지 모르겠어서 질문을 남깁니다.
html 코드
<div class="new-pri pri-words-1">
<span>1</span>
<span>2</span>
</div>
css 코드
.pri-words {
display:inline;
text-indent:10px;
}
.pri-words-1 span {
font-size:15px;
position: absolute;
opacity: 0;
overflow: hidden;
color: #1d1d1d;
-webkit-animation: rotateWords 18s linear infinite 0s;
-ms-animation: rotateWords 18s linear infinite 0s;
animation: rotateWords 18s linear infinite 0s;
}
.pri-words-1 span:nth-child(2) {
-webkit-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
color: #1d1d1d;
}
@-webkit-keyframes rotateWords {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-ms-keyframes rotateWords {
0% {
opacity: 0;
}
2% {
opacity: 0;
-ms-transform: translateY(-30px);
}
5% {
opacity: 1;
-ms-transform: translateY(0px);
}
17% {
opacity: 1;
-ms-transform: translateY(0px);
}
20% {
opacity: 0;
-ms-transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes rotateWords {
0% {
opacity: 0;
}
2% {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
5% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
20% {
opacity: 0;
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
답변 1
https://stackoverflow.com/questions/23458640/how-to-have-css3-animation-to-loop-forever
animation-iteration-count: infinite;
답변을 작성하시기 전에 로그인 해주세요.
