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;

CSS动画，反向不工作IE10

1 个答案: