CSS Transitions

Intermediate

CSS Transitions describe how a CSS property change can progress from one value to another over time. The transition model sits between a style change and the value interpolation that users observe; it does not replace the property's meaning or the layout algorithm that consumes the property.

This lesson is the primary Foxipa owner for CSS transition lifecycle, transition-property, duration, delay, timing functions, shorthand syntax, transitionability, interruption and reversal, discrete transitions, @starting-style, and transition events. It does not re-teach transforms, general value definitions, keyframe animation, or Web Animations API control.

A transition needs a before-change and after-change style

?

The transition is associated with a style change. A useful debugging model is to identify the value before the change, the value after the change, whether the property is transitionable, and the transition parameters that govern the progression.

?

transition-property chooses what can transition

transition-property names the properties for which transitions are generated. The keyword all can request all transitionable properties, while none disables transition generation. A shorthand property can expand into individual longhands for transition processing.

?

?

Duration controls how long the transition runs

transition-duration supplies the duration for transition effects. A zero duration produces no observable time interval, even though the declaration still participates in the transition configuration.

?

Delay postpones the transition start

transition-delay specifies a start delay. A negative delay does not mean “wait before starting”; it positions the transition as if it had already progressed by part of its effect when the transition begins.

?

?

Timing functions shape progress, not the endpoint

transition-timing-function maps transition progress through a timing function. The endpoints still come from the before-change and after-change values; easing changes how progress is distributed over time.

?

?

The CSS Easing Functions specification defines the timing-function value space used by transitions and animations. Level 1 is part of the stable CSS 2026 snapshot; Level 2 is a Draft Standard and adds newer easing capability such as linear().

The transition shorthand combines the main controls

The transition shorthand packages property, duration, timing function, delay, and the Level 2 transition behavior value. When reading a shorthand, separate the time values carefully: the first time is duration and the second time is delay.

?

?

Transitionability is a property-value question

Not every CSS property change produces a continuous interpolation. The transition model distinguishes values with an interpolation-capable animation type from discrete properties. Level 2 also defines transition-behavior: allow-discrete for opting into transitions of discrete properties where the specification permits them.

?

?

A transition starts because styles change

A transition is not a loop and does not run forever. It is generated when the relevant style change meets the transition rules. Reapplying the same computed value does not create a meaningful new interpolation between different endpoints.

?

Interrupted transitions can reverse without simply restarting from zero

When a transition is interrupted and reversed, the transition model has special reversing behavior so that the reverse can begin from the current transition state rather than pretending the original transition had never progressed. This is one reason hover transitions can feel responsive when the pointer quickly enters and leaves.

?

The cascade still determines which style change occurs

Transitions do not replace the cascade. The cascade determines the styles being compared, while the transition mechanism can animate an eligible change between the resulting values. This is an important boundary when debugging “my transition does nothing” problems.

?

Transforms and transitions are different owners

A transform can be the property being transitioned, but the concepts are separate. Transforms defines the geometric meaning of translate, rotate, scale, skew, perspective, and related functions. Transitions defines how a change in that transform value progresses over time.

?

Animations are a separate time-based mechanism

CSS Animations will own keyframes, animation-name, iteration, fill behavior, direction, and animation timelines. A transition instead reacts to a style change between before-change and after-change styles. Both use timing functions, but they solve different authoring problems.

?

@starting-style supplies a starting state for newly rendered elements

CSS Transitions Level 2 introduces @starting-style for cases where the element did not have a rendered before-change style in the previous style change event. The rule supplies a starting style that can be compared with the after-change style.

?

Discrete transitions and display are a special case

Level 2 specifies a path for transitioning discrete properties when transition-behavior allows it. A discrete value does not gradually become every intermediate keyword; instead its transition follows the discrete animation rules defined by the specification.

?

Transition events expose lifecycle boundaries

CSS Transitions defines lifecycle events including transitionrun, transitionstart, transitionend, and transitioncancel. These events describe the transition lifecycle; they do not create the transition themselves.

<button id="eventBtn">Hover</button><output id="log">Move over the button.</output><script>const b=document.querySelector("#eventBtn"),o=document.querySelector("#log");for(const e of ["transitionrun","transitionstart","?","transitioncancel"])b.addEventListener(e,()=>o.value=e)</script>

A canceled transition can emit transitioncancel instead of transitionend. Interrupted playback is therefore a useful test case when code reacts to transition lifecycle events.

Easing belongs to the timing model

Easing Functions is a shared specification used by both transitions and animations. The Transitions lesson uses easing to explain transition progress but does not duplicate the complete easing-function specification as a separate lesson.

?

Debug transitions by changing one variable at a time

A reliable debugging sequence is: verify that the style actually changes; verify the winning before and after values; verify the property is selected; verify transitionability; verify duration; then inspect delay, timing, interruption, and feature maturity.

?

?

Reduced motion is a conditional decision, not the transition algorithm

A user preference such as prefers-reduced-motion can conditionally change transition declarations. The Media Features / User Preferences owner explains why the condition is evaluated; this lesson explains the transition behavior that the condition changes.

?

Stable and developing features must be taught honestly

The W3C CSS 2026 Snapshot places CSS Transitions and CSS Animations in the rough-interoperability group. CSS Transitions Level 2 is a current CSSWG Editor’s Draft dated 22 April 2026. CSS Easing Functions Level 1 is included in the 2026 snapshot, while Level 2 remains draft work.

A transition authoring decision tree

Ask four questions. First, did the computed value change? Second, is the property in transition-property? Third, is its animation type transitionable under the configured behavior? Fourth, are duration, delay, timing, interruption, or startup rules affecting what you observe?

?

What this lesson intentionally does not own

Do not use this lesson to explain how transform functions map coordinates, how Grid sizes tracks, how Flexbox distributes free space, how colors interpolate, or how animation keyframes repeat. Those mechanisms have separate owners. Transitions only needs enough context to show a property changing over time.

?

Quick reference: the transition controls

Use transition-property to select properties, transition-duration to set the effect duration, transition-timing-function to shape progress, transition-delay to offset startup, and transition as the shorthand. Use transition-behavior only when the discrete-transition behavior is intentionally needed and supported. Use @starting-style when a starting comparison style is required for a newly rendered element.