Take the 2-minute tour ×

There is some problem with CSS3 native animation I've bumped into with Firefox (tried in v17) while Chrome is ok.

The sample is also available on Codepen: http://codepen.io/anon/pen/yxteC

The code is also duplicated below.
I apply some class to some element (tried to apply that with JS on hovering, but hovering by itself works absolutely the same way (:hover selector instead of .hover class)). So, the problem is that in Firefox the animation triggers only once: the first time the class had been applied. Any next time it does not.
That works perfectly in Chrome. I did not test any other browsers though (IE still does not widely support that, and Opera... well, it does not bother me much for now).

One more detail: if not to hide/show internal element (display:none/block), then it works ok in Firefox (but that's obviously not a solution).

I would really ask not to add any comments related to general cleanliness and possible improvements of the code. That's just an example.




    display: none;

div.hover ul
    display: block;

div li
    position: relative;
    top: -10px;
div.hover li
    -webkit-animation: filterAppear 0.5s;
       -moz-animation: filterAppear 0.5s;

    top: 0;
    opacity: 1;

    -webkit-animation: filterItemAppear 0.1s;
       -moz-animation: filterItemAppear 0.1s;
    -webkit-animation-fill-mode: backwards;
       -moz-animation-fill-mode: backwards;

div.hover li:nth-child(1)
    -webkit-animation-delay: 0.15s;
       -moz-animation-delay: 0.15s;
div.hover li:nth-child(2)
    -webkit-animation-delay: 0.35s;
       -moz-animation-delay: 0.35s;
div.hover li:nth-child(3)
    -webkit-animation-delay: 0.55s;
       -moz-animation-delay: 0.55s;

@-webkit-keyframes filterItemAppear
    from { opacity:0; top:-25px; }
    to { opacity:1; top:0; }
@-moz-keyframes filterItemAppear
    from { opacity:0; top:-25px; }
    to { opacity:1; top:0; }
share|improve this question

1 Answer 1

I had similar problem and today I'll find the solution.

Firefox must notice the DOM manipulation somehow. So we must add .width() or setTimeout. Width solution is cleaner IMO.

Look at my edited CodePen for your example http://cdpn.io/yhbfB.

(More about it at http://css-tricks.com/restart-css-animation/)

share|improve this answer
I've got "Tumbleweed" badge for that question ("Asked a question with no votes, no answers, no comments, and low views for a week") he he. Seems, still not so many people use modern css technologies. :) Anyway, that's kind of a solution you've mentioned. At least, it describes how exactly Firefox is "buggy". Because that's pretty clear, that if element was hidden and then it appears, it must reanimate itself again (as it Chrome does). But the solution is not really good for every day using, as I've added js just to simplify explanation, when such I don't use any for this "hover" effect. –  Agat Jan 21 '13 at 20:37
So, in general, I would define that like "Yes. This is Firefox bug" and rather stimulate somehow FF team to work on that problem rather than spending time for adding such "fix" into my code. Otherwise, that would get us back to "happy" IE6 times when designers should have "perverted" their minds to "gratify" the king with different "dances with amuletes". :) –  Agat Jan 21 '13 at 20:45
You should report it to Mozilla :). –  Jonáš Krutil Jan 23 '13 at 23:36
Actually, I've found some similar bug report and posted my comment. bugzilla.mozilla.org/show_bug.cgi?id=653791 Not sure, if that's exactly the same problem (as the last messages are two year old) and anyone still reads that, but, anyway... :) –  Agat Jan 25 '13 at 3:17

Your Answer


