旧版Chrome中的动画方向

Question

我尝试制作一些与旧版Chrome兼容的动画，特别是37.0.2062.94（在OBS内部使用 - 一种流媒体/录制软件）。

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

所以我想要：

1）使用CSS动画

使此方法在旧Chrome中运行

或

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

Here is a link to the JSFiddle.

HTML

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

CSS

* {
        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);
    }
}

JS

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);