Bug 243864

**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)