animate css not working on firefox

[mehra1]

#sample {
background-color: #990000;
display: block;
height: 25px;
width: 25px;
}
.animated:hover {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;

}
@-webkit-keyframes flash {
0%, 50%, 100% (opacity: 1;)
25%, 75% (opacity: 0;)
}

@-moz-keyframes flash {
0%, 50%, 100% (opacity: 1;)
25%, 75% (opacity: 0;)
}

@-o-keyframes flash {
0%, 50%, 100% (opacity: 1;)
25%, 75% (*opacity: 0;)
}

@keyframes flash {
0%, 50%, 100% (opacity: 1;)
25%, 75% (opacity: 0;)
}

.flash {
-webkit-animation-name: flash;
-moz-animation-name: flash;
-o-animation-name: flash;
animation-name: flash;
}

[Paulie_D]

That’s not enough. Could you put your HTML & CSS into Codepen?

How are you applying the `.flash` class?

Should this…

be this….

[mehra1]

thanx paulie d for replying and i m sorry for d mistake it should be “flash” but still itz not working on firefox..

[Kitty Giraudel]

Please, make a CodePen or a JSFiddle. Hard to debug code without seeing code.

[mehra1]

[http://jsfiddle.net/BKnzr/397/](http://jsfiddle.net/BKnzr/397/ “jsfiddle link”)

[CrocoDillon]

I think you need curly braces instead of parentheses:

.animated:hover {
-webkit-animation: flash 1s;
-moz-animation: flash 1s;
-o-animation: flash 1s;
animation: flash 1s;
}
@-webkit-keyframes flash {
0%, 50%, 100% {opacity: 1;}
25%, 75% {opacity: 0;}
}
@-moz-keyframes flash {
0%, 50%, 100% {opacity: 1;}
25%, 75% {opacity: 0;}
}
@-o-keyframes flash {
0%, 50%, 100% {opacity: 1;}
25%, 75% {opacity: 0;}
}
@keyframes flash {
0%, 50%, 100% {opacity: 1;}
25%, 75% {opacity: 0;}
}

[CrocoDillon]

Which you have in your fiddle, so I think the problem is how you declare the animation name and the duration, together it seems to work: http://jsfiddle.net/BKnzr/398/ (why do you have the * in you -o-keyframes?)

[mehra1]

thanx a ton crocodillon itz working for me too.
i really dont know how that * came up there

[Author]

Posts