mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-05-05 06:32:30 +02:00
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:
committed by
Andreas Kling
parent
fd01178b6c
commit
42bf301acd
Notes:
github-actions[bot]
2026-03-22 04:18:12 +00:00
Author: https://github.com/awesomekling Commit: https://github.com/LadybirdBrowser/ladybird/commit/42bf301acd1 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/8560
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user