CSS Transitions (transition-*) #124

Overview#

Implement CSS Transitions Level 1 to enable smooth animated changes between property values.

Requirements#

Parsing#

• Parse transition shorthand and longhand properties:
  • transition-property: all, none, or list of property names
  • transition-duration: time values (s, ms)
  • transition-timing-function: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1,y1,x2,y2), steps(n, start|end)
  • transition-delay: time values (s, ms)
• Parse shorthand: transition: opacity 0.3s ease-in 0.1s

Interpolation Engine#

• Build a property interpolation system that can lerp between computed values
• Support interpolation for:
  • Lengths (px, em, etc.)
  • Colors (interpolate in sRGB)
  • Opacity (0.0 to 1.0)
  • Transforms (when applicable)
• Non-interpolable properties snap at 50%

Transition Management#

• Detect computed style changes that should trigger transitions
• Track active transitions per element (start time, from/to values, timing function)
• Evaluate cubic-bezier and step timing functions
• Request animation frame repaints while transitions are active
• Fire transitionend events when transitions complete

Integration#

• Extend CSS parser in crates/css/ for transition properties
• Add transition tracking to style resolution in crates/style/
• Connect to the animation loop via requestAnimationFrame in crates/platform/

Acceptance Criteria#

• transition: opacity 0.3s ease works correctly
• Multiple properties can transition simultaneously
• Timing functions (ease, linear, cubic-bezier, steps) evaluate correctly
• Transition delay works
• Transitions trigger on computed style changes
• transitionend event fires
• Interrupting a transition mid-flight starts a new one from current value
• All existing tests continue to pass
• New unit tests for interpolation and timing functions