这是我的代码,但在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);}
}
有人可以帮助我吗?