CODEWITHSUNDEEP
cssanimationinternet-explorer-10reverse
user1597713
user1597713

Reputation: 287

CSS Animation, Reverse not working IE10

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?

Upvotes: 1

Views: 556

Answers (1)

Albzi
Albzi

Reputation: 15609

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;

Upvotes: 1

Related Questions