翻訳後にローテートしたいが、回転エフェクトが機能しない（CSS 3アニメーション）

Question

スパンタグを上に動かして1440回転してから下に移動するエフェクトを作成しようとしています。しかし、3つのアニメーションを適用すると、回転効果は常にスパンタグの位置をリセットします（元の位置に戻り、新しい位置で回転するのではなく回転します）。私はフォワードプロパティを使用していますが、動作しません。

＃音声テキスト：ホバー{ アニメーション：移動アップ0.5秒転送容易イン、スピン1S容易-で0.5秒前方に、移動ダウン1S容易-に転送2S。私は1つのアニメーションのために行くだろう }

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