CSS Animation, Reverse not working IE10

Question

I'm having some trouble with IE10 accepting the reverse direction property on my CSS animation. Chrome, Firefox, Safari and IE11 are all ok, but IE10 will accept an animation travelling left to right, but not right to left using reverse.

Here's the code:

.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;}
}

Can anyone help?

Answer 1

Try this in the keyframes instead:

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

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

Then take the reverse out:

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