animate

CSS transitions for Puree UI components are applied to interactive elements like buttons and panels using animatable properties such as background-color, color, border-color, and opacity. You define timing functions like ease or linear and trigger state changes via container.set_property and mark_dirty to animate feedback cues.

Animatable CSS properties in Puree UI are restricted to background-color, color, border-color, and opacity. Layout-based animations are explicitly prohibited, ensuring transitions enhance feedback and usability without triggering reflow or shifting component dimensions.

CSS transitions on Puree UI panels and status indicators should be used when you need to guide user attention and improve perceived responsiveness during state changes. Applying cohesive transition strategies across components signals clickability and communicates interaction feedback.

Puree UI does not support layout-based animations. This Skill explicitly prohibits layout-based animations and restricts animatable properties to background-color, color, border-color, and opacity to maintain consistent usability and avoid layout shifts.

Designing consistent transition timing across Puree UI components involves defining permissible timing functions like ease and linear alongside duration ranges. A cohesive transition strategy applied uniformly across buttons, panels, and status indicators maintains consistency and improves perceived responsiveness.

Ease and linear timing functions can be used for Puree UI button transitions to animate background-color shifts on hover and opacity changes on active state. These timing functions maintain consistency while communicating press feedback and clickability.