简体   繁体   中英

CSS3 animations not working in IE or Opera

I created a simple animation to spin an image on a website using webkit properties and CSS3.

Here the style css (it applys only to divs)

.bg {
    position: relative;
    top: 0px;
    left: 0px;
    display:block;
    -webkit-animation: spin 100s infinite linear;
    -moz-animation: spin 100s infinite linear;
    -o-animation: spin 100s infinite linear;
    -ms-animation: spin 100s infinite linear;
    opacity:0.8;
    filter:alpha(opacity=80); /* For IE8 and earlier */
    z-index:-1;
}
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg);}
  100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
    0% { -moz-transform: rotate(0deg);}
  100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes spin {
    0% { -o-transform: rotate(0deg);}
  100% { -o-transform: rotate(360deg);}
}
@-ms-keyframes spin {
    0% { -ms-transform: rotate(0deg);}
  100% { -ms-transform: rotate(360deg);}
}

Now the result is that on Mozilla Firefox, Chrome and Safari, it works without problems, but in Opera and Inte.net explorer I can't see any animation.

http://caniuse.com/#feat=css-animation

IE10 and Opera 12 support CSS animations. Not earlier.

Maybe this information will be usefull for some one who have problems with animations in Opera 12.

In opera 12.x css animation property 'infinite' didn't works for me. Animation was palyed only once and then stoped. But after I changed integer value of duration (for example 1s) to fractional value (for example 1.1s) animatione start play infinite.

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM