**Overview:** When defining CSS animation keyframes with a start and end (0% and 100%) on a defined property (e.g. transform), intermediate keyframes where the start/end property is not defined causes the animation to fail interpolating the value at that intermediate keyframe. **Steps to Reproduce:** Reproduce this with an animation on any element with the start/end property being omitted at 50%, affecting another property instead. Live example on CodePen: https://codepen.io/chriskirknielsen/pen/xxWapbW?editors=1100 Code to reproduce: ```html <p class="test-element">Text that should be moving</p> ``` ```css .test-element { animation: testAnim 1s ease-in-out infinite; } @keyframes testAnim { 0% { transform: rotate(-90deg) translateX(1.25em) rotate(90deg); } 50% { opacity: 0; /* Commenting this prevents the issue */ } 100% { transform: rotate(-450deg) translateX(1.25em) rotate(450deg); } } ``` **Actual Results:** The animation doesn't smoothly animate the `transform` property from 0% to 100%. **Expected Results:** The animation runs smoothly and the omitted property is interpolated across keyframes. **Build Date & Hardware:** Using Safari Technology preview, Release 151 (Safari 16.0, WebKit 17615.1.1.2) Running macOS Monterey 12.4 on MacBook Pro (16-inch, 2019) **Additional Builds and Platforms:** Doesn't occur on Safari Version 15.5 (17613.2.7.1.8) on macOS Doesn't occur on Chrome Version 104 on macOS Doesn't occur on Firefox Version 103 on macOS (this is my first bug report, I apologise for the formatting)
I am able to reproduce this bug in Safari 15.6 on macOS 12.5 and behavior between Safari 15.6 and Safari Technical Preview 151 is also different: -> Safari 15.6 -> round and round movement but not blink like animation -> Safari TP 151 -> just blink animation but not round and round movement ___ Chrome Canary 106 -> Round and Round movement and blinking Firefox Nightly 105 -> Round and Round movement and blinking ___ Just wanted to clarify on behavior of STP 151, hence posting the comment. Thanks!
<rdar://problem/98584661>
(In reply to Ahmad Saleem from comment #1) > I am able to reproduce this bug in Safari 15.6 on macOS 12.5 and behavior > between Safari 15.6 and Safari Technical Preview 151 is also different: > > -> Safari 15.6 -> round and round movement but not blink like animation > -> Safari TP 151 -> just blink animation but not round and round movement > > ___ > > Chrome Canary 106 -> Round and Round movement and blinking > Firefox Nightly 105 -> Round and Round movement and blinking > > ___ > > Just wanted to clarify on behavior of STP 151, hence posting the comment. > Thanks! I was so caught up on the transform I didn't think about the blinking effect but you're right!
Indeed, Safari was broken in Safari 15.6 and is broken in a different way in the latest Safari Technology Preview. I'm looking at this now.
This looks like this regressed in https://github.com/WebKit/WebKit/commit/43e80183650b2053fb865f81218eb3c94724f42c, the fix for bug 239906.
Created attachment 462306 [details] Testcase
Pull request: https://github.com/WebKit/WebKit/pull/5283
Committed 255723@main (2fe23935f668): <https://commits.webkit.org/255723@main> Reviewed commits have been landed. Closing PR #5283 and removing active labels.
*** Bug 245147 has been marked as a duplicate of this bug. ***