为什么背景图像不能在动画中工作(在IE和Firefox中)

时间:2015-03-19 15:43:56

标签: html css internet-explorer animation background-image

这是我的代码,但在IE和Firefox中,它保留了正常css中的图像。它实际上在Chrome,Opera和Safari中都有效。

它从左向右飞行,然后从右向左飞行(因此它被镜像)。

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

有人可以帮助我吗?

0 个答案:

没有答案