Bug 190179 – css animation-duration ignored on hover, but respected on viewport change

• Component: CSS
• Status: RESOLVED WORKSFORME

[cdaringe]

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

[Antoine Quint]

Could you provide a reduction?

[Radar WebKit Bug Importer]

<rdar://problem/45048659>

[cdaringe]

ya, sure thing.  here you go: https://codepen.io/cdaringe/pen/gBwZKR

[cdaringe]

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);}
}

[Sam Sneddon [:gsnedders]]

This appears to work nowadays.