3 ms·
There is a big flaw in CSS3 implementation of animation: If the animation is interrupted midway (i.e the animation happens on :hover, and the user moves the mo
by nightshadow 16y ago
There is a big flaw in CSS3 implementation of animation:
If the animation is interrupted midway (i.e the animation happens on :hover, and the user moves the mouse away), the reversed animation always takes the same amount of time. This can result in the reverse animation proceeding at different speeds (try setting the -webkit-transition-duration to 5s, and hover your mouse over the element for just a second).
Instead, the browser should precisely reverse the animation it has already played, e.g. if half the animation has already occured, for 0.25 seconds, the reverse animation should similarly last only 0.25 seconds.
- MartinCron 16y agoThe example in the linked article behaves exactly as you describe, at least in Chrome on Mac. If I just fleetingly hover over something, it pulses up and down at the same speed for the same amount of time. It just looks right.