similar symptoms, different causality report: https://bugs.webkit.org/show_bug.cgi?id=181242 safari ignores animation-duration using the :hover psuedo-class when overwriting an existing duration property. this is easily demonstrable as shown here: https://youtu.be/F7RpRXddUfI observe in the video: - an initial, 240s animation-duration (e.g. slow rotation of the image) - selection of the :hover class, setting animation-duration to 1.5s. the rotation speed _does not change_ to a fast rotation. - toggling away and back from the affected tab. suddenly, the animation-duration is honored, and fast rotation is achieved - ...the exercise repeats with another value
Could you provide a reduction?
<rdar://problem/45048659>
ya, sure thing. here you go: https://codepen.io/cdaringe/pen/gBwZKR
in its totality: <div class='box' /> .box { animation-duration: 60000ms; animation-iteration-count: infinite; animation-name: spin; animation-timing-function: linear; width: 100px; height: 100px; background-color: black; } .box:hover { animation-duration: 1500ms; background-color: pink; } @keyframes spin { from {transform:rotate(0deg);} to {transform:rotate(360deg);} }
This appears to work nowadays.