CSS3 动画在 IE 或 Opera 中不起作用

Question

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.

Answer 1

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

IE10 and Opera 12 support CSS animations. Not earlier.

Answer 2

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.