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