Renderer-side timed transition descriptor.

Declares animation intent in the view -- the renderer handles interpolation locally with zero wire traffic during animation.

Three forms

# 1. Keyword (duration positional shorthand)
opacity: transition(300, to: 0.0)
opacity: transition(300, to: 0.0, easing: :ease_out, delay: 100)

# 2. Keyword (all keyword)
opacity: transition(to: 0.0, duration: 300)

# 3. Pipeline
alias Plushie.Animation.Transition
opacity: Transition.new(300, to: 0.0) |> Transition.easing(:ease_out)

# 4. Do-block
opacity: transition 300 do
  to 0.0
  easing :ease_out
  delay 100
end

Enter animations

Use from: to set the starting value on mount:

container "item",
  opacity: transition(200, to: 1.0, from: 0.0),
  translate_y: transition(200, to: 0, from: 20, delay: 50) do
  ...
end

On mount, the renderer uses from: as the starting value and animates to to:. Without from:, the target value is used immediately (no enter animation). On subsequent renders, from: is ignored and animation starts from the current interpolated value.

Looping

loop/1 and loop/2 are convenience constructors for repeating transitions:

# Pulse forever
opacity: loop(800, to: 0.4, from: 1.0)

# Spin forever (no reverse)
rotation: loop(1000, to: 360, from: 0, reverse: false)

# Finite: 3 cycles
opacity: loop(800, to: 0.4, from: 1.0, cycles: 3)

Completion events

Use on_complete: to receive a %WidgetEvent{type: :transition_complete} when the animation finishes:

opacity: transition(300, to: 0.0, on_complete: :faded_out)