CODEWITHSUNDEEP
internet-explorerbrowsercssopera
Antonio Colella
Antonio Colella

Reputation: 35

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 Internet explorer I can't see any animation.

Upvotes: 2

Views: 5766

Answers (2)

filburt
filburt

Reputation: 141

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.

Upvotes: 0

Rob W
Rob W

Reputation: 349122

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

IE10 and Opera 12 support CSS animations. Not earlier.

Upvotes: 5

Related Questions