怎样让动画反向运动(恢复)

loading
  • 108
.ani{animation: box 1s ease-in-out both;}
@keyframes box {
    0% {transform:translate(0, 0);}
    100% {transform:translate(300px, 0);}
}
$("btn1").click(function(){
    $("div").addClass("ani");
})
$("btn2").click(function(){
   // ??
})
评论
阅读 2.5k
5 个回答
✓ 已被采纳
.ani2{animation: box 1s ease-in-out both;}
@keyframes box2 {
    0% {transform:translate(300px, 0);}
    100% {transform:translate(0px, 0);}
}
$("btn2").click(function(){
   $("div").removeClass("ani").addClass("ani2")
})

语法:

animation-direction:<single-animation-direction>[,<single-animation-direction>]*

<single-animation-direction> = normal | reverse | alternate | alternate-reverse

默认值:normal

适用于:所有元素,包含伪对象:after和:before

继承性:无

动画性:否

计算值:指定值

媒体:视觉


取值:

normal: 正常方向
reverse: 反方向运行
alternate:动画先正常运行再反方向运行,并持续交替运行
alternate-reverse:动画先反运行再正方向运行,并持续交替运行


说明:

检索或设置对象动画在循环中是否反向运动

如果提供多个属性值,以逗号进行分隔。
对应的脚本特性为animationDirection。

用class组合下呗。不要老用缩写啥的。

改用transition

<div class='ani'></div>
<style>
    .ani{
      width: 100px;height: 100px;background: black;
      transition: transform 1s;
    }
    .t2{
      transform: translate(300px, 0);
    }
</style>
<script>
    var a = document.querySelector('.ani')
    var onoff = true
    a.addEventListener('click', function() {
      if (onoff) {
        onoff = false
        a.className = 'ani t2'
      } else {
        onoff = true
        a.className = 'ani '
      }
      
    }, false)
</script>
.ani{
animation:box 5s 2;
animation-direction:alternate;
}

animation-direction 属性定义是否应该轮流反向播放动画。
如果 animation-direction 值是 "alternate",则动画会在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等)向后播放。
注释:如果把动画设置为只播放一次,则该属性没有效果。

CSS3 animation-direction 属性

@keyframes box {
    0% {transform:translate(0, 0);}
    50% {transform:translate(300px, 0);}
    100% {transform:translate(0, 0);}
}

或animation-direction:alternate;

宣传栏