Transitions & Animation

Animate style changes with transition. The view does not rebuild for each frame.

#Hover transitions

button()
    .bg(Color::rgb8(37, 99, 235))
    .transition(Transition::colors(Duration::from_millis(160)))
    .hover(|style| style.bg(Color::rgb8(29, 78, 216)))
    .child("Hover")

#State-driven animation

Change a style field from view state and call invalidate. Keep the element mounted while it animates.

#Timing and frame rate

Transition::new takes a Duration. Set easing with with_easing and optionally cap cadence with max_fps.

#Supported properties

Background, border color and width, radius, text color, box shadow, opacity, and transform interpolate. Width, height, and padding do not.

#Mounting and reduced motion

Keep an overlay mounted during its exit transition when the component supports that. Transitions follow the system Reduce Motion setting.

#Animated images

img plays GIF and WebP files from the path you pass. You do not need a timer.