Fade in Text That Works In Opera?

[sage]

Hey All,

I needs a little help with CSS fade in effects that work with Opera.

The CSS I’ve posted below works in all browsers so far except Opera. Anyone know any ninja tricks that would make it work in Opera as well?

Here’s the css :

/* Pure CSS3 jQuery-Like fadeIn

---

*/
.fadeIn {
/* CSS needed for animation

---

*/
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
-o-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
/* Animation Times – Time for image to fade in

---

*/
.fadeIn-05s {
-webkit-animation-duration:0.5s;
-moz-animation-duration:0.5s;
-o-animation-duration:0.5s;
animation-duration:0.5s;
}
.fadeIn-1s {
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
}
.fadeIn-3s {
-webkit-animation-duration:3s;
-moz-animation-duration:3s;
-o-animation-duration:3s;
animation-duration:3s;
}
.fadeIn-5s {
-webkit-animation-duration:5s;
-moz-animation-duration:5s;
-o-animation-duration:5s;
animation-duration:5s;
}
.fadeIn-7s {
-webkit-animation-duration:7s;
-moz-animation-duration:7s;
-o-animation-duration:7s;
animation-duration:7s;
}
/* Animation Delay – Time for image to be delayed

---

*/
.fadeIn-Delay-05s {
-webkit-animation-delay:0.5s;
-moz-animation-delay:0.5s;
-o-animation-delay:0.5s;
animation-delay:0.5s;
}
.fadeIn-Delay-1s {
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
-o-animation-delay:1s;
animation-delay:1s;
}
.fadeIn-Delay-3s {
-webkit-animation-delay:3s;
-moz-animation-delay:3s;
-o-animation-delay:3s;
animation-delay:3s;
}
.fadeIn-Delay-5s {
-webkit-animation-delay:5s;
-moz-animation-delay:5s;
-o-animation-delay:5s;
animation-delay:5s;
}
.fadeIn-Delay-7s {
-webkit-animation-delay:7s;
-moz-animation-delay:7s;
-o-animation-delay:7s;
animation-delay:7s;
}

/* Key Frames

---

*/
@-webkit-keyframes fadeIn {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-moz-keyframes fadeIn {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-o-keyframes fadeIn {
from {
opacity:0;
}
to {
opacity:1;
}
}
@keyframes fadeIn {
from {
opacity:0;
}
to {
opacity:1;
}
}

[jimmy]

You don’t need to use “-o-” prefix, the only prefix that’s necessary in animations is “-webkit-“.
Other than that – hard to say, Opera fully supports CSS3 animations…

EDIT: For me – this is working in Opera. http://codepen.io/jimmythenice/pen/hFAfG

[Author]

Posts