这个JSFiddle包含一个CSS动画,适用于Chrome、Firefox和Safari,但不适用于IE 10。它没有在IE10中启动动画-在这里看不到任何错误吗?
.x1 {
left: 200px;
top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-o-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
-webkit-animation: moveclouds 47s linear infinite;
-moz-animation: moveclouds 47s linear infinite;
-ms-animation: moveclouds 47s linear infinite;
-o-animation: moveclouds 47s linear infinite;
animation: moveclouds 47s linear infinite;
}
@keyframes "moveclouds" {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
@-moz-keyframes moveclouds {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
@-webkit-keyframes "moveclouds" {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
@-ms-keyframes "moveclouds" {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
@-o-keyframes "moveclouds" {
0% {
margin-left: 1000px;
}
100% {
margin-left: -1000px;
}
}
这是JsFiddle链接http://jsfiddle.net/zXTSp/1/
在IE10 中尝试Jsfidle
http://jsfiddle.net/2V3Sx/
应该是@-webkit-keyframes moveclouds {
不是@-webkit-keyframes "moveclouds" {
。。。打字错误…:)
希望这能起作用