LibWeb: Apply animation-timing-function per keyframe interval

Per the CSS Animations spec, the animation-timing-function property
describes how the animation progresses between each pair of keyframes,
not as an overall effect-level timing function.

Previously we set it as the effect-level timing function on the
AnimationEffect, which caused easing to be applied to the global
animation progress. This made animations with multiple keyframes
"pause" at the start and end of the full animation cycle instead of
easing smoothly between each pair of keyframes.

Now we:
- Store per-keyframe easing in ResolvedKeyFrame from @keyframes rules
- Store the default easing on CSSAnimation instead of on the effect
- Apply per-keyframe easing to the interval progress during
  interpolation, falling back to the CSS animation's default easing
- Also store per-keyframe easing from JS-created KeyframeEffects to
  avoid incorrectly applying CSS default easing to replaced effects
This commit is contained in:
Andreas Kling
2026-03-21 10:18:25 -05:00
committed by Andreas Kling
parent fd01178b6c
commit 42bf301acd
Notes: github-actions[bot] 2026-03-22 04:18:12 +00:00
7 changed files with 38 additions and 3 deletions

View File

@@ -1,5 +1,5 @@
linear at 0.25: 50px
linear at 0.5: 100px
ease at 0.25 is NOT linear: true
ease at 0.5: 160.484375px
per-keyframe linear at 0.25: 81.703125px
ease at 0.5: 100px
per-keyframe linear at 0.25: 50px