This JSFiddle contains a CSS animation that works for me in Chrome, Firefox and Safari, but not IE 10. It doesn't start the animation in IE10 - can't see anything wrong here?
.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;
}
}
Here's the JsFiddle Link http://jsfiddle.net/zXTSp/1/
Try the Jsfiddle in IE10
It should be @-webkit-keyframes moveclouds {
not @-webkit-keyframes "moveclouds" {
...a typo...:)
Hope this works
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.