그누보드 QA - css 애니메이션 질문입니다

css 애니메이션 질문입니다

roro11 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2022.03.11 22:48:29 962 (112.♡.♡.225)

답변 1

본문

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;
    }
  }