Transition Delay
This transition adds a delay before the effect begins (1.2 seconds).
Transition Duration
This transition effect lasts longer (3 seconds), making it more noticeable.
Transition Property
This only changes the background color on hover. No transform is applied.
Timing Function: Linear
The effect moves at a consistent speed throughout the animation.
Timing Function: Ease-In
The transition starts slowly and then speeds up.
Timing Function: Ease-Out
The transition starts fast and ends slowly.
Timing Function: Ease-In-Out
This starts and ends slowly, creating a balanced effect.
Timing Function: Cubic-Bezier
This uses a custom cubic-bezier curve for unique timing behavior.
Real-World Example
This styled card demonstrates subtle transitions for a UI component.
Hover Me
Real-world UI interaction with translate and scale transitions.