CSS Animations (@keyframes, animation-*) #8

Overview#

Implement CSS Animations Level 1: @keyframes rules and animation-* properties.

Requirements#

Parsing#

• Parse @keyframes rules:
  • Named keyframes: @keyframes slidein { from { ... } to { ... } }
  • Percentage stops: @keyframes fade { 0% { ... } 50% { ... } 100% { ... } }
  • Multiple selectors per block: 0%, 100% { ... }
• Parse animation shorthand and longhand properties:
  • animation-name
  • animation-duration
  • animation-timing-function (same as transition timing functions)
  • animation-delay
  • animation-iteration-count: <number> or infinite
  • animation-direction: normal, reverse, alternate, alternate-reverse
  • animation-fill-mode: none, forwards, backwards, both
  • animation-play-state: running, paused

Animation Engine#

• Reuse the interpolation engine from CSS Transitions
• Compute current keyframe progress based on elapsed time, iteration count, and direction
• Interpolate between keyframe stops
• Apply fill modes (forwards: keep final state, backwards: apply 0% during delay)

Animation Management#

• Track active animations per element
• Handle animation start/restart when animation-name changes
• Support pausing and resuming (animation-play-state)
• Fire animation events: animationstart, animationend, animationiteration
• Request animation frame repaints while animations are active

Integration#

• Extend CSS parser in crates/css/ for @keyframes and animation-*
• Store keyframes in stylesheet representation
• Connect animation tick to render loop

Dependencies#

• CSS Transitions (for the interpolation engine and timing functions)

Acceptance Criteria#

• @keyframes rules parse correctly with from/to and percentage stops
• animation: slidein 1s ease-in applies correctly
• animation-iteration-count: infinite loops indefinitely
• animation-direction: alternate reverses on each iteration
• animation-fill-mode: forwards retains final keyframe state
• Pausing and resuming works
• Animation events fire at correct times
• All existing tests continue to pass
• New unit tests for keyframe parsing, animation timing, and fill modes