Animation / keyframes not working in Firefox (triggering a CSS animation with JavaScript)
This code works in the current chrome and internet explorer, but not in the current firefox (UPDATED Code with unnecessary -moz prefix ):
@-moz-keyframes sh-tada {
10% {
opacity:1;
}
80% {
opacity:1;
}
100% {
opacity:0;
}
}
@-webkit-keyframes sh-tada {
10% {
opacity:1;
}
80% {
opacity:1;
}
100% {
opacity:0;
}
}
@keyframes sh-tada {
10% {
opacity:1;
}
80% {
opacity:1;
}
100% {
opacity:0;
}
}
.sh-tada {
opacity:0;
-webkit-animation: sh-tada 2s linear 1;
-moz-animation: sh-tada 2s linear 1;
animation: sh-tada 2s linear 1;
}
The item is not displayed at all.
Alas, none of the other equally titled questions will help in this case ...
ADDITION / ADVICE
Perhaps my problem is not in the code above, but in the question
How is CSS animation activated?
This element is simply enabled with ...style.display='inline'
. For Chrome and IE, this looks fine. But isn't that okay for firefox?
+3
Swiss Mister
source
to share
2 answers
You forgot to add a rule for firefox. checkout the following code
@-webkit-keyframes sh-tada {
10% {
opacity:1;
}
80% {
opacity:1;
}
100% {
opacity:0;
}
}
@-moz-keyframes sh-tada {
10% {
opacity:1;
}
80% {
opacity:1;
}
100% {
opacity:0;
}
}
@keyframes sh-tada {
10% {
opacity:1;
}
80% {
opacity:1;
}
100% {
opacity:0;
}
}
.sh-tada {
opacity:0;
-webkit-animation: sh-tada 2s linear 1;
-moz-animation: sh-tada 2s linear 1;
animation: sh-tada 2s linear 1;
}
+2
Nilesh mahajan
source
to share
This is because you are missing the definition for Mozilla Broswer keyframes.
@-moz-keyframes sh-tada {
10% {
opacity:1;
}
80% {
opacity:1;
}
100% {
opacity:0;
}
}
and moz-animation
.sh-tada {
-moz-animation:sh-tada 2s linear 1;
}
Add them to your css and it should work.
+1
brance
source
to share