번역 후 회전 시키려고하지만 회전 효과가 작동하지 않습니다 (CSS 3 애니메이션)

Question

스팬 태그가 위로 이동하고 스핀이 1440 도로 움직일 수있는 효과를 만들려고합니다. 그러나 세 가지 애니메이션을 적용하면 회전 효과가 항상 span 태그의 위치를 ​​다시 설정합니다 (원점으로 이동 한 다음 새 위치에서 회전하는 대신 회전합니다). 전달 속성을 사용했지만 작동하지 않습니다.

# 오디오 텍스트 : 가져가 { 애니메이션 : 이동 업 0.5 초 전달 용이성에서, 스핀 1 초 편의성에 0.5 초 앞으로 이동, 다운 1 초 편의성에 전달 2 초; }

@keyframes move-up { 
     0% { 
      transform: translate3d(0, 0, 0); 
     } 
     100% { 
      transform: translate3d(0, -25px, 0); 
     } 
    } 

    @keyframes spin{ 
     0%{ 
      transform:rotateY(0deg); 
     } 
     100%{ 
      transform:rotateY(720deg); 
     } 
    } 
    @keyframes move-down{ 
     0%{ 
      transform: translate3d(0,-25px,0); 
     } 
     100%{ 
      transform:translate3d(0,0,0); 
     } 
    } 

Answer 1

나는 하나의 애니메이션 갈 것 :

#audio-text:hover{ 
    animation:upDown 3s 1; 
    } 


@keyframes upDown 
{ 
    0% {transform: rotate(0deg);top:0px;} 
    25% {transform: rotate(0deg);top:-25px;} 
    50% {transform: rotate(1440deg); top:-25px;} 
    75{transform: rotate(1440deg); top:-25px; } 
    100% {transform:rotate(1440deg); top:0px; } 
}