我想在翻译后放旋转，但旋转效果不起作用（CSS 3 aniamtion）

Question

我正在尝试创建一个效果，其中span标记可以向上移动并旋转1440deg然后向下移动。但是，当我应用三个动画时，旋转效果始终会重置span标记的位置（移回原点然后旋转而不是在新位置旋转）。我使用了转发属性，但它不起作用。

  

＃音频文本：悬停{               动画：向上移动0.5s轻松前进，1s轻松进入0.5s前锋，向下移动1s轻松2s前锋;           }

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