Javascript 旧版Chrome中的动画方向

我正在尝试使一些动画与Chrome的旧版本兼容，特别是37.0.2062.94（它在OBS（一种流媒体/录制软件）中使用）

在新版的Chrome上，一切都很好。但是，在这些旧版本上，动画会淡入，但反向动画不起作用。也许动画方向：反向？我已经尽我所能尝试了供应商前缀等

因此，我想：

1） 使用CSS动画使此方法在旧Chrome中工作

或

2） 使用JQuery模拟淡出效果，确保它与旧版本的Chrome兼容

HTML

JS

var$box=$（'.box'）；
（函数animateBox（i）{
$box.eq（i）.addClass（'animate'）.one（'animationend'，function（）{
setTimeout（函数（）{
$（this）.hide（）.show（0）.addClass（'reverse'）.one（'animationend'，function（）{
$（this.removeClass（'animate'）；
if（++i<$box.length）setTimeout（animateBox，1000，i）；//在动画之间暂停
});
}.bind（this），2000）；//动画持续多长时间
});
})(0);

您是否在最后一个关键帧中尝试过transform:translate（0px，0px）？我认为在需要的时候制作整个CSS动画，并按照您建议的方式进行操作是一种修复方法。这意味着我手工编码反向动画，而不是仅仅使用动画方向。它应该与Chrome 19+兼容，所以这应该可以工作（）。试着颠倒顺序（先放前缀，然后放实际的最终实现，这就是通常的做法。）

<div id="container">
    <div id="one" class="box"></div>
    <div id="two" class="box"></div>
    <div id="three" class="box"></div>
    <div id="four" class="box"></div>
</div>

* {
        margin: 0;
        padding: 0;
    }

    #one {
        background: black;
    }
    #two {
        background: blue;
    }
    #three {
        background: green;
    }
    #four {
        background: red;
    }

    .box {
        margin: 10px;
    }

    .box.animate {
        animation: box .4s ease-in;
        -webkit-animation: box .4s ease-in;
        width: 500px;
        height: 500px;
        display: block;
    }
    .box.animate.reverse {
        animation-direction: reverse;
        -webkit-animation-direction: reverse;
    }
        @keyframes box {
    0% {
        opacity: 0;
        transform: translate(-10px,-10px);
    }
    100% {
        opacity: 1;
        transform: translate(0px,0px);
    }
}

@-webkit-keyframes box {
    0% {
        opacity: 0;
        -webkit-transform: translate(-10px,-10px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(0px,0px);
    }
}

var $boxes = $('.box');

(function animateBox(i) {
    $boxes.eq(i).addClass('animate').one('animationend', function () {
        setTimeout(function () {
            $(this).hide().show(0).addClass('reverse').one('animationend', function () {
                $(this).removeClass('animate');
                if(++i < $boxes.length) setTimeout(animateBox, 1000, i); // pause between animations
            });
        }.bind(this), 2000); // how long animation stays on
    });
})(0);