CSS Animations And Transitions

To animate smoothly between two states of a property when it changes, interpolating intermediate values over time.

To animate an element through multiple keyframes over time, including loops and complex multi-step sequences, without needing state changes.

transition: ; shorthand for transition-property, transition-duration, transition-timing-function, and transition-delay.

A longhand that names the CSS property (or "all") whose changes should be animated. Defaults to "all".

A longhand that sets how long the transition runs, in seconds (0.3s) or milliseconds. Default is 0s, meaning no transition.

A longhand that sets how long to wait after the change before the transition begins. Default is 0s.

A longhand defining the acceleration curve of the transition: ease, linear, ease-in, ease-out, ease-in-out, steps(), cubic-bezier().

ease (equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0)).

Four numbers P1x, P1y, P2x, P2y in the range 0–1 (for x) defining the control points of a cubic Bézier curve describing speed over time.

Divides the animation into a fixed number of discrete jumps instead of a smooth interpolation. steps(4, end) produces 4 visible frames.

The animation jumps at the END of each step; the element shows the start value until each step completes, then snaps to the next value.

The animation jumps at the START of each step; the first value change is shown immediately and n-1 more jumps follow.