Transition Property Duration and Timing

A CSS transition interpolates between two property values over a specified duration when the value changes (e.g., on hover). No JavaScript is needed.

Specifies which CSS properties to animate. Use all to transition every animatable property, or list specific properties.

Sets how long the transition takes. Accepts time values in seconds (s) or milliseconds (ms).

Combines all four transition sub-properties: property | duration | timing-function | delay.

List multiple transitions separated by commas to independently animate different properties:

Delays the start of the transition. Useful for sequencing animations or letting one transition finish before another starts.

Always place the transition property on the base state, not the :hover state. This ensures the transition plays on both hover-enter and hover-exit.

Most numerical CSS properties can be transitioned: colors, dimensions, opacity, transforms, etc. Discrete properties (like display) cannot be smoothly interpolated — they snap.

Using transition: all can cause unexpected animations on properties you do not intend to animate. Always specify explicit properties in production code.

Color transitions interpolate between values. Use the same color format for best results:

Avoid transitioning layout-triggering properties like width, height, margin, and padding for performance. They cause layout recalculation on every animation frame. Use transform and opacity instead.

CSS transitions smooth property changes over time using transition-property, duration, timing-function, and delay. Place transitions on the base state for bidirectional animation. Prefer specific property lists over all for performance and predictability.