怎样让动画反向运动（恢复）

Question

.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(){
   // ??
})

Answer 1

.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")
})

Answer 2

语法：

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组合下呗。不要老用缩写啥的。

Answer 3

改用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>

Answer 4

.ani{
animation:box 5s 2;
animation-direction:alternate;
}

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

CSS3 animation-direction 属性

Answer 5

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

或animation-direction:alternate;