190179 2018-10-01 17:32:11 -0700 css animation-duration ignored on hover, but respected on viewport change 2022-02-01 03:12:17 -0800 1 1 1 Unclassified WebKit CSS Safari 11 Mac macOS 10.14 RESOLVED WORKSFORME https://bugs.webkit.org/show_bug.cgi?id=181242 InRadar P2 Normal --- 1 cdaringe webkit-unassigned dino graouts simon.fraser webkit-bug-importer oldest_to_newest 1465327 0 cdaringe 2018-10-01 17:32:11 -0700 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 1466735 1 graouts 2018-10-05 11:27:37 -0700 Could you provide a reduction? 1466737 2 webkit-bug-importer 2018-10-05 11:29:28 -0700 <rdar://problem/45048659> 1466915 3 cdaringe 2018-10-06 21:25:06 -0700 ya, sure thing. here you go: https://codepen.io/cdaringe/pen/gBwZKR 1466916 4 cdaringe 2018-10-06 21:26:54 -0700 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);} } 1835892 5 gsnedders 2022-02-01 03:12:17 -0800 This appears to work nowadays.