CSStransities

CSStransities (commonly known in English as CSS transitions) are a styling feature that enables smooth interpolation between two property values over time when a property changes. Transitions are declared in CSS and activate when a property changes due to a different rule, pseudo-class (for example :hover), or script-driven modification.

Key properties include transition-property (which properties to animate), transition-duration (how long the animation lasts), transition-timing-function (the easing curve), and transition-delay (when the transition starts). A shorthand property, transition, combines these values in a single declaration. Only properties that animate numerically or have defined interpolation behavior can be transitioned; many layout-affecting or discrete properties, such as display, do not transition.

Transitions differ from CSS animations in that they describe a change between two states and require a triggering change, while animations can run continuously and support keyframes. Common timing functions include linear, ease, ease-in, ease-out, and cubic-bezier for custom curves.

Practical use favors animating transform and opacity for best performance because these are typically handled by the compositor and avoid layout recalculation. Developers should be aware of user preferences (prefers-reduced-motion) and interrupt behavior when new changes override ongoing transitions. Modern browsers widely support transitions; early implementations required vendor prefixes but prefixes are now rarely necessary.