CSS 动画，反向不起作用 IE10

Question

我在IE10接受CSS动画上的反向属性时遇到了一些问题。Chrome，Firefox，Safari和IE11都可以，但IE10将接受从左到右移动的动画，但不能使用反向从右到左移动。

代码如下：

.city {
    position: absolute;
    width: 100%;
    height: 300px;
    top: 40%;
    left: 0px;
}
.traffic-right {
    @extend .city;
    background-image: url("../images/traffic_right.png");
    background-repeat: repeat-x;
    -webkit-animation: animate 35s linear infinite;
            animation: animate 35s linear infinite;
}
.traffic-left {
    @extend .city;
    background-image: url("../images/traffic_left.png");
    background-repeat: repeat-x;
    -webkit-animation: animate 35s linear reverse infinite;
            animation: animate 35s linear reverse infinite;
}
@-webkit-keyframes animate {
    from {background-position: 0px;}
    to {background-position: 2000px;}
}
@keyframes animate {
    from {background-position: 0px;}
    to {background-position: 2000px;}
}

谁能帮忙？

Answer 1

在关键帧中尝试此操作：

@-webkit-keyframes animate {
    from {background-position: 0px;}
    to {background-position: -2000px;}
}
@keyframes animate {
    from {background-position: 0px;}
    to {background-position: -2000px;}
}

然后将reverse取出：

-webkit-animation: animate 35s linear infinite;
        animation: animate 35s linear infinite;