653791 - [css3-animations] css3 animation changes don't always repeat on 2nd hover

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Jason Ng]

User-Agent:       Mozilla/5.0 (Windows NT 6.1; WOW64; rv:5.0a2) Gecko/20110429 Firefox/5.0a2
Build Identifier: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:5.0a2) Gecko/20110429 Firefox/5.0a2

There's a "propeller" that spins and is supposed to slowdown and stop when hovered.

For this there's an infinitely rotating element (with generated content) with an animation-duration:1.5s normally.  And then on a hover setting animation-iteration-count:1 and animation-duration:5s, the animation changes to that just once.

Every other time on hover, it seems it never does it with duration 5s and instead "stops" instantly.

If there's another element on the page that has animation changes on hover, and the propeller is hovered on after that, it will also stop quickly rather slow down even on it's first hover.

This also seems to happen with webkit browsers too.

Though I'm not sure if the slowdown is really supposed to repeat on ever subsequent hover.

Reproducible: Always

Comment 1

[Jason Ng]

Attachment: Propeller test case example

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

So, two things here:
 (1) if you're not changing the animation-name, we preserve the start time of the animation.  I think WebKit does too.
 (2) you really want the :hover selector to be on something that doesn't move (like a parent of the propeller).

So I think our behavior is correct here, but you can get what you want by changing (2) and by using a different animation-name for the slowdown animation (though that requires duplicating the keyframes).

Comment 3

[Boleslav]

I am not sure if that's exactly the same problem, however it seems so. That's why I did not add any new bug requests.

The detailed description of not common behavior described here: http://stackoverflow.com/questions/6499678/reading-raw-unencoded-content-of-filebytes
In other words, that one-time animation plays only the first time the object appears (display:block/none or on hover). As for me, that's not really a correct behaviour, because if I use it on element which appears every time in menu (for example, on hovering), that's pretty clear that the animation should start from the beginning.
Plus, it does work well in webkit.

Comment 4

[Boleslav]

I am sorry for the wrong link... Too late at night...
http://stackoverflow.com/questions/14311700/css3-animation-every-time-class-applied-firefox-bug/14439614#comment20195299_14439614