Transitions & animation

transition

Shorthand that makes property changes happen gradually instead of at once. Each comma-separated item names a property, a duration, an easing function, a delay and optionally allow-discrete.

A <single-transition> is [ none | <single-transition-property> ] || <time> || <easing-function> || <time> || <transition-behavior-value>. The parts can come in any order, but the first time is always the duration and the second the delay. It sets transition-property, transition-duration, transition-timing-function, transition-delay and transition-behavior.

.button { transition: background-color 0.2s, scale 0.15s ease-out; }
.button:hover { background-color: navy; scale: 1.05; }

transition-property

Which properties transition when they change. A <single-transition-property> is all or a property name; none turns transitions off.

The lists in the transition longhands pair up by position: the first property takes the first duration, the second the second, and so on. Shorter lists repeat to fill the gap.

transition-duration

How long each transition takes. The initial 0s means changes happen at once, so a transition only runs when a duration is set.

transition-timing-function

The easing curve of each transition: how the value moves from start to end over the duration. See Easing & timeline functions for the values.

transition-delay

How long to wait after a value changes before its transition starts. A negative delay starts the transition straight away, part of the way through.

animation

Shorthand that runs one or more @keyframes animations on an element. Each comma-separated item can give a name, duration, easing, delay, iteration count, direction, fill mode and play state.

The parts can come in any order, but the first time is the duration and the second the delay. The shorthand also resets animation-timeline to auto without letting you set it, so write animation-timeline after animation.

@keyframes spin { to { rotate: 1turn; } }
.spinner { animation: spin 1s linear infinite; }

animation-name

The names of the @keyframes rules to run. Each name starts its own animation; the other animation longhands pair up with the names by position.

A <keyframes-name> is an identifier or a string. A name that matches no @keyframes rule runs no animation.

animation-duration

How long one cycle of each animation takes. For a time-based animation auto means 0s; for a scroll-driven animation it means the animation fills its timeline.

The auto keyword arrived later than the property: Chrome 115 · Firefox 159 · Safari 18.4.

animation-timing-function

The easing curve of each animation. It applies between each pair of keyframes, not across the whole animation, and a keyframe can set its own animation-timing-function for the segment that follows it.

animation-delay

How long to wait before each animation starts. A negative delay starts the animation straight away, part of the way through, which is a simple way to stagger several copies of one animation.

animation-iteration-count

How many times each animation runs: a non-negative number, which can be fractional to stop part way through a cycle, or infinite.

animation-direction

Whether each cycle plays the keyframes forwards or backwards.

animation-fill-mode

Whether an animation's keyframe styles apply outside the time it is running. forwards keeps the final keyframe after it ends, backwards applies the first keyframe during the delay, and both does both.

animation-play-state

Pauses (paused) or resumes (running) each animation. A paused animation holds its current frame and carries on from there when it is set running again.

animation-composition

How an animation's values combine with the underlying value of the same property. replace overrides it, add appends to it (a transform list is extended), and accumulate sums them (two translations become one longer translation).

animation-timeline

The timeline that drives each animation's progress. auto is the document's normal clock; a named timeline, scroll() or view() ties the animation to scrolling instead. See Scroll-driven animation.

A <single-animation-timeline> is auto | none | <dashed-ident> | <scroll()> | <view()>. A <dashed-ident> names a timeline set up with scroll-timeline-name or view-timeline-name; none leaves the animation with no timeline, so it does not run.

transition-behavior

Whether transitions also run for properties that animate discretely, such as display and content-visibility. With allow-discrete the value flips at a sensible point instead of at once; for display: none the box stays visible until the transition ends.

A <transition-behavior-value> is normal or allow-discrete. To animate an element in as it appears, give its starting styles in an @starting-style rule.

[popover] {
  opacity: 0;
  transition: opacity 0.2s, display 0.2s allow-discrete, overlay 0.2s allow-discrete;
}
[popover]:popover-open { opacity: 1; }
@starting-style { [popover]:popover-open { opacity: 0; } }

interpolate-size

Lets transitions and animations run between a length and a sizing keyword such as auto, min-content or fit-content. It is inherited, so setting allow-keywords on :root turns it on for the whole page.

:root { interpolate-size: allow-keywords; }
.drawer { height: 0; overflow: clip; transition: height 0.3s; }
.drawer.open { height: auto; }

overlay

Whether an element is in the top layer, as open popovers and modal dialogs are. Only the browser sets it; you cannot change its value, but you can list it in a transition with allow-discrete so an element stays in the top layer until its closing transition has finished.

view-transition-name

Gives an element its own snapshot in a view transition, so it animates separately from the rest of the page between the old and new states. Each name must be used by only one element at a time.

An element with the same name in the old and new state animates from one position and size to the other. The named group is styled through pseudo-elements such as ::view-transition-group(hero). The keyword match-element gives each element an automatic unique name (Chrome 137 · Firefox 144 · Safari 18.4).

.product-photo { view-transition-name: hero; }
::view-transition-group(hero) { animation-duration: 0.4s; }

view-transition-class

Adds one or more class names to an element's view transition pseudo-elements, so many named elements can share one set of styles. Select them with a class in the pseudo-element argument, such as ::view-transition-group(*.card).

The class has no effect without a view-transition-name on the same element.

view-transition-group

Where an element's view transition group sits in the tree of pseudo-elements. By default every group is a direct child of ::view-transition; nesting a group inside an ancestor's group lets the ancestor clip it or move it along with itself.

view-transition-scope

Marks an element as a scope for the view transition names inside it, for view transitions started on that element rather than on the whole document.