Animations & Transitions

Bring your UI to life! Configure CSS transitions for smooth hover states, or apply keyframe animations for continuous motion.

Transitions (Hover State)

Transition Property (transition-*)

Duration (duration-*)

Timing Function (ease-*)

Keyframe Animations

Animation (animate-*)

Hover over the button to test transitions

class="transition-all duration-300 ease-in-out "

iMotion & Interactivity

CSS provides two main ways to animate elements: Transitions (which interpolate between two states like normal and hover) and Keyframe Animations (which run continuously or on command).

✨ Transitions:To make a hover effect smooth, you MUST define what properties are allowed to transition (`transition-all` or `transition-colors`), how long it takes (`duration-300`), and the easing curve (`ease-in-out`).

If you just add `hover:bg-red-500` without a transition property, it will snap instantly!

⚠️ Performance: Try to stick to `transition-transform` and `transition-opacity` when animating movement or fading. Animating things like `width`, `height`, or `margin` forces the browser to recalculate the layout, which can cause lag.