CSS Animations and Keyframes

Intermediate

CSS Animations let an author describe a sequence of CSS property values with keyframes and then run that authored sequence over an animation timeline. Unlike a transition, an animation does not require the browser to discover a before-change and after-change pair caused by a style change.

This lesson is the primary Foxipa owner for authored keyframes, animation-name, animation-duration, animation-timing-function as used by animations, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, animation-composition, animation shorthand, and CSS animation lifecycle events. It does not re-teach transform geometry, general easing semantics, scroll/view timelines, or the Web Animations API.

The central animation model

A CSS animation has three important authoring pieces: a keyframe sequence, a name that selects that sequence, and timing controls that determine how the sequence is played. The animated properties still keep their own meanings; the animation model supplies the changing values over time.

?

A transition and an animation solve different problems

A transition reacts to a style change and interpolates between the relevant before-change and after-change values. An animation can run from keyframes even when no user action changes a selector from one state to another. Both can use the same easing-function vocabulary, but their triggering and lifecycle models differ.

?

Defining keyframes with @keyframes

The @keyframes rule defines named keyframe rules. Each keyframe selector identifies a point in the animation progress: from represents 0%, to represents 100%, and percentage selectors identify other offsets.

?

Use percentage offsets for intermediate states

Percentage keyframe selectors let you author intermediate points. When a property is present at two surrounding offsets, the animation system interpolates between those values according to the applicable timing function.

?

Keyframe offsets need not be evenly spaced

Offsets describe progress through the animation, not elapsed wall-clock time in your source code. Two adjacent keyframes can occupy unequal portions of the total animation interval.

?

Missing properties can be interpolated across the surrounding keyframes

A keyframe does not have to repeat every property. For a property that is present at relevant surrounding keyframes, the animation model can interpolate across the interval; properties that never receive an animatable keyframe value do not magically acquire one.

?

Duplicate keyframe selectors are not ordinary cascading rules

Keyframes have their own processing rules. If multiple keyframe blocks use the same offset and specify the same property, later keyframe rules for that offset take precedence for that property. Do not reason about duplicate keyframes as though every declaration simply participates in normal selector specificity.

?

animation-name selects the keyframe sequence

animation-name connects an element to a named @keyframes rule. none means no animation is applied by that animation item. Multiple animation names can be supplied as a comma-separated list, with corresponding list-valued timing properties applying by position.

?

animation-duration controls one animation cycle

animation-duration specifies the length of each animation cycle. A zero duration produces no time interval for visible progression. A list of durations can correspond to multiple animation names.

?

animation-delay can start an animation later—or begin partway through it

A positive animation-delay postpones the start of an animation. A negative delay can make an animation appear to begin as though some of its timeline has already elapsed, which is useful for staggering repeated effects without JavaScript.

?

Timing functions shape progress between keyframes

animation-timing-function controls how animation progress is distributed between keyframes. The general easing-function model is owned by CSS Easing Functions; this lesson focuses on where animation timing functions apply within the animation model.

?

Keyframes can have interval-specific timing functions

A timing function declared in a keyframe affects the interval that follows that keyframe. This lets one animation use different pacing for different segments without making the timing-function lesson part of the animation lesson.

?

animation-iteration-count controls repetition

animation-iteration-count specifies how many cycles run. It can be an integer, a fractional number, or infinite. A fractional count can stop partway through a cycle, which makes the final visible state depend on the animation’s direction and fill behavior.

?

animation-direction changes the order in which cycles traverse keyframes

normal plays each cycle forward. reverse plays backward. alternate switches direction between cycles, while alternate-reverse starts backward and alternates. Direction changes how the authored sequence is traversed; it does not rewrite the keyframes.

?

animation-fill-mode controls styles outside the active interval

Fill mode determines whether keyframe styles apply before the animation starts and/or after it finishes. none is the default behavior; forwards retains the final state after completion, backwards applies the first relevant state during a delay, and both applies both sides.

?

animation-play-state pauses and resumes an animation

animation-play-state controls whether an animation is running or paused. The paused state freezes the current animation progress rather than resetting the animation to its initial keyframe.

?

The animation shorthand combines the core controls

The animation shorthand can configure name, duration, timing function, delay, iteration count, direction, fill mode, play state, and—where supported by the relevant animation model—composition-related settings. Longhands remain useful when you need to isolate one variable while debugging.

?

Multiple animations use comma-separated lists

Multiple animation names let independent keyframe sequences run on the same element. Corresponding list-valued properties are matched by position, and list repetition rules matter when the lengths differ.

?

Animation order matters when multiple effects target the same property

When multiple animation effects contribute to the same property, their ordering and composition behavior matter. Do not treat a list of animations as though their declarations were simply merged into one keyframe rule.

?

animation-composition controls how animation values combine

CSS Animations Level 2 defines animation-composition for additive animation behavior. replace uses the animated value as the replacement contribution; add and accumulate enable compositional combinations where the property’s animation type supports them. This is developing specification material and should not be treated as universally interchangeable across engines.

?

Animation timing functions belong to the easing-function boundary

Animations consume timing functions, but CSS Easing Functions owns the general definitions of linear, cubic-bezier(), steps(), and newer easing syntax. This lesson only explains their placement in an animation sequence so the same easing model is not duplicated.

?

Animation events expose lifecycle milestones

CSS animation lifecycle events include animationstart, animationiteration, animationend, and animationcancel. They let scripts observe animation lifecycle without changing the declarative CSS ownership of the animation itself.

?

animationstart can occur after a delay

An animationstart event marks the start of the animation, including cases where a positive delay has already elapsed. Negative delays affect the reported elapsed timing because the animation can start with active time already advanced.

?

animationend is different from animationcancel

animationend indicates normal completion of an animation. animationcancel indicates that an animation was canceled before its normal completion, such as when the animation is removed or otherwise stopped by style changes. A canceled animation is not equivalent to one that naturally reaches its end.

?

The cascade still decides which animation declarations apply

Animation properties are ordinary CSS declarations and therefore participate in the cascade. The winning animation declaration then supplies the animation configuration; the keyframe sequence supplies values during playback. These are two distinct stages of reasoning.

?

Animation values are interpreted by their owning property

An animation does not redefine the meaning of transform, opacity, color, width, or any other property. It supplies values over time; the property’s own specification defines what those values mean and whether and how they interpolate.

?

The document timeline is the default time source for ordinary CSS animations

Traditional CSS animations progress with the document’s animation timeline. CSS Animations Level 2 also connects the animation model to animation timelines more generally, but scroll-driven and view-progress timelines are a separate curriculum owner so their range and timeline semantics are not duplicated here.

?

Reduced-motion preferences can gate animations without changing their ownership

The Media Features / User Preferences / Color Adjustment lesson owns prefers-reduced-motion. Animations only demonstrates the boundary: the preference can select a different animation configuration, while this lesson remains responsible for the animation model itself.

?

Discrete property animation needs an explicit mental model

Not every property produces a smooth numeric interpolation. Some animation types are discrete: the value changes according to the property’s defined animation type rather than moving continuously through numeric intermediate values. Do not assume that every keyframed property has the same interpolation behavior.

?

Negative delays and fill modes interact with the visible starting state

When debugging the first frame, inspect delay, iteration count, direction, and fill mode together. A negative delay can place the animation inside its active interval immediately, while backwards fill controls what applies during a positive delay.

?

Changing animation configuration can restart or replace an animation

Because animation properties are ordinary CSS declarations, a change in the winning animation configuration can cause an existing animation to be replaced, restarted, or otherwise affected. When debugging a restart, inspect the computed animation-name and the rule that changed it before blaming the keyframes.

?

Animation composition is not the same as transform composition

Transforms defines how multiple transform functions compose into a transform value. CSS Animations Level 2 defines how animation contributions can compose with other animation contributions. These are related but distinct layers: do not move transform-matrix math into this lesson.

?

A one-variable debugging method makes animation behavior understandable

When an animation looks wrong, reduce the problem to one variable: first confirm animation-name and @keyframes, then duration, then delay, then iteration/direction/fill, then timing function, and finally interactions with other animations or media conditions. Change one declaration at a time.

?

Stable and developing animation features must be taught honestly

W3C currently lists CSS Animations Level 1 as a Working Draft and CSS Animations Level 2 as a Working Draft. The current W3C CSS work page also lists Web Animations and Scroll-driven Animations as Working Drafts. CSS Easing Functions Level 1 is a Candidate Standard, while Level 2 is a Draft Standard. These statuses matter when deciding which advanced animation features to present as broadly established versus developing.

What this lesson intentionally does not own

Do not use this lesson to explain transform matrices or coordinate systems, general easing-function definitions, scroll-driven timeline ranges, the Web Animations API, or user-preference semantics. Those mechanisms have separate owners. Animations only needs enough context to show how an authored keyframe sequence uses them.

?

An animation authoring decision tree

Ask six questions. First, what property values should change? Second, can those values be expressed as keyframes? Third, which @keyframes name supplies the sequence? Fourth, how should cycles be timed, repeated, directed, and filled? Fifth, is the animation configuration being changed by the cascade or a media condition? Sixth, are multiple animations, composition, or a separate timeline involved?

?

Quick reference: the animation controls

Use @keyframes to author the sequence, animation-name to select it, animation-duration and animation-delay to control time, animation-timing-function to shape progress, animation-iteration-count and animation-direction to control repetition, animation-fill-mode for before/after behavior, animation-play-state for pause/resume, and animation as the compact shorthand. Treat animation-composition and timeline-related Level 2 features as developing and keep scroll/view timelines in their dedicated owner.