Why doesn't background-image work in an animation (in IE & Firefox)

Question

This is my code, but in IE and Firefox it stays the image it was in the normal css. It is actually working in Chrome, Opera and also in Safari.

It flies from left to right and then from right ro left (so it is mirrored).

.plane {
    width:170px;
    height:85px;
    background-image:url(../images/plane.png);
    background-size:cover;
    margin-left:-100px;
    top:15px;
    animation: plane 24s 1;
    -webkit-animation: plane 24s 1;
    -o-animation: plane 24s 1;
    -moz-animation: plane 24s 1;
    -ms-animation: plane 24s 1;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -webkit-animation-delay:0s;
    cursor:pointer;
    z-index:1;
    position:absolute;
}

    @-ms-keyframes plane {
        0% {-ms-transform: translate(0px,0px); background-image:url(../images/plane.png);}
        5% {-ms-transform: translate(70px,7px); background-image:url(../images/plane2.png);} 
        10% {-ms-transform: translate(140px,1px); background-image:url(../images/plane3.png);} 
        15% {-ms-transform: translate(210px,7px); background-image:url(../images/plane.png);}
        20% {-ms-transform: translate(280px,1px); background-image:url(../images/plane2.png);}
        25% {-ms-transform: translate(350px,9px); background-image:url(../images/plane3.png);}
        30% {-ms-transform: translate(420px,1px); background-image:url(../images/plane.png);}
        35% {-ms-transform: translate(490px,7px); background-image:url(../images/plane2.png);}
        40% {-ms-transform: translate(560px,1px); background-image:url(../images/plane3.png);}
        45% {-ms-transform: translate(630px,7px); background-image:url(../images/plane.png);}
        50% {-ms-transform: translate(700px,1px); background-image:url(../images/plane2.png);}
        51% {-ms-transform: translate(700px,7px); background-image:url(../images/planeTurn.png);}
        55% {-ms-transform: translate(630px,1px); background-image:url(../images/plane2Turn.png);}
        60% {-ms-transform: translate(560px,7px); background-image:url(../images/plane3Turn.png);}
        65% {-ms-transform: translate(490px,1px); background-image:url(../images/planeTurn.png);} 
        70% {-ms-transform: translate(420px,9px); background-image:url(../images/plane2Turn.png);} 
        75% {-ms-transform: translate(350px,1px); background-image:url(../images/plane3Turn.png);} 
        80% {-ms-transform: translate(280px,5px); background-image:url(../images/planeTurn.png);} 
        85% {-ms-transform: translate(210px,1px); background-image:url(../images/plane2Turn.png);} 
        90% {-ms-transform: translate(140px,7px); background-image:url(../images/plane3Turn.png);} 
        95% {-ms-transform: translate(70px,1px); background-image:url(../images/planeTurn.png);} 
        100% {-ms-transform: translate(-75px,9px); background-image:url(../images/planeTurn.png);} 
}

Can someone help me?

If you could give a fiddle reproducing your problem, I think it'll be easier to understand what you're trying to achieve. — Everton Lenger, Mar 19 '15 at 15:55
Whats is the "1" in this definition? `animation: plane 24s 1;` — zgood, Mar 19 '15 at 15:55
http://yarondassoneville.be/webanimatie/doodle @EvertonLenger — Yaron Dassonneville, Mar 19 '15 at 15:57
Your link doesn't work.. Please see [this](http://stackoverflow.com/help/mcve) about how to create a good example. — Everton Lenger, Mar 19 '15 at 16:02
Oh sorry this will work. Made a mistake http://yarondassonneville.be/webanimatie/doodle @EvertonLenger — Yaron Dassonneville, Mar 19 '15 at 16:04

Why doesn't background-image work in an animation (in IE & Firefox)

0 Answers0