CSS Animations Level 2

Editor’s Draft,

Specification Metadata
This version:
https://drafts.csswg.org/css-animations-2/
Issue Tracking:
Inline In Spec
GitHub Issues
Editors:
L. David Baron (Mozilla)
(Mozilla)
Suggest an Edit for this Spec:
GitHub Editor
Issues List:
In Bugzilla

Abstract

This CSS module describes a way for authors to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats, and repeating behavior.

CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc.

Status of this document

This is a public copy of the editors’ draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don’t cite this document other than as work in progress.

GitHub Issues are preferred for discussion of this specification. When filing an issue, please put the text “css-animations-2” in the title, preferably like this: “[css-animations-2] …summary of comment…”. All issues and comments are archived, and there is also a historical archive.

This document was produced by the CSS Working Group.

This document was produced by a group operating under the W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

This document is governed by the 1 March 2019 W3C Process Document.

1. Delta specification

This is a delta specification, meaning that it currently contains only the differences from CSS Animations Level 1 [CSS3-ANIMATIONS]. Once the Level 1 specification is closer to complete, it will be merged with the additions here into a complete level 2 specification.

2. Animations

Changes to any of the animation properties defined in this specification cause the corresponding CSSAnimation object and its associated objects to be updated according to the correspondance between these properties and Web Animations concepts defined in § 3 Keyframes.

However, if the author modifies the animation using the Web Animations programming interface, the changes from the programming interface take precedence as follows:

Note, the reference to a successful call in the above rules is necessary to ensure that when an exception is thrown by any of these methods, the override behavior is not applied.

2.1. Owning element

The owning element of an animation refers to the element or pseudo-element to which the animation-name property was applied that generated the animation.

If an animation generated using the markup defined in this specification is later disassociated from that markup by an update to the computed value of the animation-name property on the owning element, the animation is disassociated from its owning element (that is, it has no owning element from that point forwards).

In the example below, animation’s initial owning element is elem. animation is disassociated from element through an update to the computed value of elem’s animation-name property.

elem.style.animation = 'spin 1s';
let animation = elem.getAnimations()[0]; // animation’s owning element is elem
elem.style.animation = ''; // animation no longer has an owning element

Note that although the owning element is often equal to the target element of an animation’s target effect, this is not always the case. The following example demonstrates some of the situations where these two elements may differ.

elem.style.animation = 'move 1s';
let animation = elem.getAnimations()[0];
// animation.effect.target == elem == animation’s owning element

animation.effect.target = elem2;
// animation.effect.target == elem2 != animation’s owning element

animation.effect = null;
// animation.effect?.target is undefined != animation’s owning element

2.2. Animation composite order

Animations generated from the markup defined in this specification have an animation class of ‘CSS Animation’.

CSS Animations with an owning element have a later composite order than CSS Transitions but an earlier composite order than animations without a specific animation class.

Within the set of CSS Animations with an owning element, two animations A and B are sorted in composite order (first to last) as follows:

  1. If the owning element of A and B differs, sort A and B by tree order of their corresponding owning elements. With regard to pseudo-elements, the sort order is as follows:

    • element

    • ::marker

    • ::before

    • any other pseudo-elements not mentioned specifically in this list, sorted in ascending order by the Unicode codepoints that make up each selector

    • ::after

    • element children

  2. Otherwise, sort A and B based on their position in the computed value of the animation-name property of the (common) owning element.

The composite order of CSS Animations without an owning element is based on their position in the global animation list.

This differs from the behavior defined for transitions. We should probably sort transitions first, then animation, then use the global animation list. The reason being that when developer tools etc. hang on to orphaned animations and transitions in order to replay them, they should maintain roughly the same composite order.

CSS Animations generated using the markup defined in this specification are not added to the global animation list when they are created. Instead, these animations are appended to the global animation list at the first moment when they transition out of the idle play state after being disassociated from their owning element. CSS Animations that have been disassociated from their owning element but are still idle do not have a defined composite order.

Note, this behavior relies on the fact that disassociating an animation from its owning element always causes it to enter (or remain) in the idle play state.

3. Keyframes

For a given target (pseudo-)element, element, an animation name, name, and the position of the animation in element’s animation-name list, position, keyframe objects are generated as follows:

  1. Let default timing function be the timing function at position position of the resolved value of the animation-timing-function for element, repeating the list as necessary as described in CSS Animations 1 §4.2 The animation-name property.

  2. Find the last @keyframes at-rule in document order with <keyframes-name> matching name.

    If there is no @keyframes at-rule with <keyframes-name> matching name, abort this procedure. In this case no animation is generated, and any existing animation matching name is canceled.

  3. Let keyframes be an empty sequence of keyframe objects.

  4. Let animated properties be an empty set of longhand CSS property names.

  5. Perform a stable sort of the keyframe blocks in the @keyframes rule by the offset specified in the keyframe selector, and iterate over the result in reverse applying the following steps:

    1. Let keyframe offset be the value of the keyframe selector converted to a value in the range 0 ≤ keyframe offset ≤ 1.

    2. Let keyframe timing function be the value of the last valid declaration of animation-timing-function specified on the keyframe block, or, if there is no such valid declaration, default timing function.

    3. After converting keyframe timing function to its canonical form (e.g. such that step-end becomes steps(1, end)) let keyframe refer to the existing keyframe in keyframes with matching keyframe offset and timing function, if any.

      If there is no such existing keyframe, let keyframe be a new empty keyframe with offset, keyframe offset, and timing function, keyframe timing function, and prepend it to keyframes.

    4. Iterate over all declarations in the keyframe block and add them to keyframe such that:

      • All variable references are resolved to their current values.

      • Each shorthand property is expanded to its longhand subproperties.

      • All logical properties are converted to their equivalent physical properties.

      • For any expanded physical longhand properties that appear more than once, only the last declaration in source order is added.

        Note, since multiple keyframe blocks may specify the same keyframe offset, and since this algorithm iterates over these blocks in reverse, this implies that if any properties are encountered that have already added at this same keyframe offset, they should be skipped.

      • All property values are replaced with their computed values.

    5. Add each physical longhand property name that was added to keyframe to animated properties.

  6. If there is no keyframe in keyframes with offset 0, or if amongst the keyframes in keyframes with offset 0 not all of the properties in animated properties are present,

    1. Let initial keyframe be the keyframe in keyframes with offset 0 and timing function default timing function.

      If there is no such keyframe, let initial keyframe be a new empty keyframe with offset 0, and timing function default timing function, and add it to keyframes after the last keyframe with offset 0.

    2. For each property in animated properties that is not present in some other keyframe with offset 0, add the computed value of that property for element to the keyframe.

  7. Similarly, if there is no keyframe in keyframes with offset 1, or if amongst the keyframes in keyframes with offset 1 not all of the properties in animated properties are present,

    1. Let final keyframe be the keyframe in keyframes with offset 1 and timing function default timing function.

      If there is no such keyframe, let final keyframe be a new empty keyframe with offset 1, and timing function default timing function, and add it to keyframes after the last keyframe with offset 1.

    2. For each property in animated properties that is not present in some other keyframe with offset 1, add the computed value of that property for element to the keyframe.

The above procedure requires iterating over keyframe blocks in reverse. It could be rewritten so this is not required but that will likely change the behavior for some edge cases. We should verify what current implementations do and possible remove the requirement to iterate in reverse.

In practice, implementations will likely maintain specified values and variable references internally and only resolve them to computed values when getKeyframes() is called on a KeyframeEffect associated with a CSSAnimation (and, more specifically, a CSSAnimation whose effect has not been replaced and whose keyframes have not been overridden using setKeyframes()). It is not clear that soing so would produce an observable difference in behavior, however. If it does, the above procedure might need to be adjusted so that the requirement to expand variables and convert to property values to computed values is limited to the result of getKeyframes() and not the internal representation of keyframes.

3.1. The animation-duration property

The animation-duration property specifies the iteration duration of the animation’s associated animation effect.

3.2. The animation-timing-function property

The animation-timing-function is used to determine the timing function applied to each keyframe as defined in § 3 Keyframes.

3.3. The animation-iteration-count property

The animation-iteration-count property specifies the iteration count of the animation’s associated animation effect.

3.4. The animation-direction property

The animation-direction property specifies the playback direction of the animation’s associated animation effect.

3.5. The animation-play-state property

The animation-play-state is used to pause or play the animation.

If at any time, including when the animation is first generated, the resolved value of animation-play-state corresponding to an animation is newly running, the implementation must run the procedure to play an animation for the given animation with the auto-rewind flag set to false.

If at any time, including when the animation is first generated, the resolved value of animation-play-state corresponding to an animation is newly paused, the implementation must run the procedure to pause an animation for the given animation.

The above requirements do not apply if the animation’s play state is being overridden by the Web Animations API as described in § 2 Animations.

3.6. The animation-delay property

The animation-delay property specifies the start delay of the animation’s associated animation effect.

3.7. The animation-fill-mode property

The animation-fill-mode property specifies the fill mode of the animation’s associated animation effect.

3.8. The animation-composition property

The animation-composition property defines the composite operation used when multiple animations affect the same property simultaneously.

Name: animation-composition
Value: <single-animation-composition>#
Initial: replace
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: list, each item a keyword as specified
Canonical order: per grammar
Animation type: not animatable

<single-animation-composition> = replace | add | accumulate

The values of animation-composition have the meaning defined for the corresponding values of the composite operation defined in Web Animations [WEB-ANIMATIONS].

When specified in a keyframe, animation-composition defines the composite operation to use for each property specified in that keyframe until the next keyframe specifying each property.

For example, the following stylesheet defines two different animations targetting the scale property.
@keyframes heartbeat {
  from {
    scale: 1;
    animation-timing-function: ease-out;
  }
  30% {
    scale: 1.3;
  }
}
.heartbeat {
  animation: heartbeat 0.3s 2s infinite;
}

@keyframes throb {
  50% {
    scale: 1.8;
  }
}
.icon:mouseover {
  animation: throb 0.4s add;
}

If these two animations are applied to the same element, normally only one animation would apply, but by specifying add as the animation-composition on the second animation, the result of the two animations will be combined.

Since CSS Transitions [CSS3-TRANSITIONS] have a lower composite order, it is possible to use animation-composition to combine CSS Animations with underlying transitions as in the following example.

.icon {
  filter: blur(20px);
  transition: filter 0.5s;
}
.icon:hover {
  filter: blur(0px);
  animation: brightness-pulse 3s infinite add;
}

@keyframes pulse {
  0% {
    scale: 1.1;
    filter: brightness(130%);
  }
  10% {
    scale: 1;
    filter: brightness(100%);
  }
}

Create pictures of these examples and verify they make sense.

3.9. The animation-timeline property

The animation-timeline property defines the timeline used with the animation.

Note: This specification does not introduce any syntax to specify animation timelines but instead it is up to others specifications such as Scroll-linked Animations [SCROLL-ANIMATIONS] to do so.

Name: animation-timeline
Value: <single-animation-timeline>#
Initial: auto
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: list, each item either a case-sensitive css identifier or the keywords none, auto.
Canonical order: per grammar
Animatable: no
<single-animation-timeline> = auto | none | <timeline-name>

The animation-timeline property is similar to properties like animation-name and animation-duration in that it can have one or more values, each one imparting additional behavior to a corresponding animation on the element, with the timelines matched up with animations as described here.

Each value has type <single-animation-timeline>, whose possible values have the following effects:

auto

The animation’s timeline is a DocumentTimeline, more specifically the default document timeline.

none

The animation is not associated with a timeline.

<timeline-name>

Find the last timeline at-rule in document order with its name matching <timeline-name>. If such a timeline at-rule exists, then the animation’s timeline is a timeline as defined by that rule. Otherwise the animation is not associated with a timeline.

<timeline-name> = <custom-ident> | <string>

Make it easier to use animation-name to select the timeline when animation-timeline is not specified. Allowing animation-name to be used for selecting timeline enables most common animations to have to use a single name for both their keyframes and timeline which is simple and ergonomics. The animation-timeline property gives authors additional control to independently select keyframes and timeline if necessary.

3.10. The animation shorthand property

The animation shorthand property syntax is as follows:

<single-animation> = <time> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ] || <single-animation-timeline>

4. Animation Events

4.1. Event dispatch

Note, this is a more general description of event dispatch than that of CSS Animations Level 1 [CSS3-ANIMATIONS] since it must account for the possibility of animations being seeked or reversed using the Web Animations API [WEB-ANIMATIONS].

For the purpose of determining which events to dispatch, the phases defined in the Web Animations model are used. These definitions apply to an animation effect, however, for the purpose of dispatching events, we consider a CSS Animation to have the same phase as its target effect. For example, a CSS Animation is in the before phase if its target effect is in the before phase.

A CSS Animation that does not have a target effect is considered to be in the idle phase if its current time is unresolved, in the before phase if its current time is less than zero, and in the after phase otherwise.

Similarly, subsequent references to the start delay, active duration, current iteration, iteration start, and iteration duration of a CSS animation should be understood to refer to the corresponding properties of the animation’s target effect.

For calculating the elapsedTime of each event, the following definitions are used:

Each time an animation is sampled and is not pending, the events to dispatch are determined by comparing the animation’s phase before and after the sample as follows:

Change Events dispatched Elapsed time (ms)
idle or beforeactive animationstart interval start
idle or beforeafter ٭ animationstart interval start
animationend interval end
activebefore animationend interval start
activeactive and the current iteration of the animation’s target effect has changed since the previous sample animationiteration (See below)
activeafter animationend interval end
afteractive animationstart interval end
afterbefore ٭ animationstart interval end
animationend interval start
not idle and not afteridle animationcancel The active time of the animation at the moment it was cancelled calculated using a fill mode of both.

٭ Where multiple events are listed for a state change, all events are dispatched in the order listed and in immediate succession.

† The elapsed time for an animationiteration event is defined as follows:

  1. Let previous current iteration be the current iteration from the previous sample.

  2. If previous current iteration is greater than current iteration, let iteration boundary be current iteration + 1, otherwise let it be current iteration.

  3. The elapsed time is the result of evaluating (iteration boundary - iteration start) × iteration duration).

Since the elapsed time defined in the table and procedure above is expressed in milliseconds, it must be divided by 1,000 to produce a value in seconds before being assigned to the elapsedTime member of the AnimationEvent.

5. DOM Interfaces

5.1. The CSSAnimation interface

[Exposed=Window]
interface CSSAnimation : Animation {
  readonly attribute CSSOMString animationName;
};
animationName, of type CSSOMString, readonly

The key used to find matching keyframes rules that define target effect at the point when the animation was created. This is the value of the animation-name property that caused this object to be generated.

5.2. Requirements on pending style changes

Various operations may affect the computed values of properties on elements. User agents may, as an optimization, defer recomputing these values until it becomes necessary. However, all operations included in programming interface defined in this specification, as well as those operations defined in Web Animations [WEB-ANIMATIONS] that may return objects or animation state defined by this specification, must produce a result consistent with having fully processed any such pending changes to computed values.

As an example, in the following code fragment, when the specified style of elem is initially updated, a user agent may defer recalculating the computed value of the animation property.

However, the getAnimations() method called on elem is specified by Web Animations and can return CSSAnimation objects as defined in this specification. Hence, as result of the requirements in this section, the user agent must calculate the updated value of elem’s animation property and create the requested CSSAnimation object before returning its result.

elem.style.animation = 'fadeOut 1s';
elem.getAnimations()[0].pause();

Similarly, reading playState may depend on pending style changes.

elem.style.animation = 'fadeOut 1s paused';
const anim = elem.getAnimations()[0];
elem.style.animationPlayState = 'running';
console.log(anim.playState); // Should be 'running'.

6. Privacy and Security Considerations

This specification introduces no new privacy or security considerations.

Conformance

Document conventions

Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification.

All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. [RFC2119]

Examples in this specification are introduced with the words “for example” or are set apart from the normative text with class="example", like this:

This is an example of an informative example.

Informative notes begin with the word “Note” and are set apart from the normative text with class="note", like this:

Note, this is an informative note.

Advisements are normative sections styled to evoke special attention and are set apart from other normative text with <strong class="advisement">, like this: UAs MUST provide an accessible alternative.

Conformance classes

Conformance to this specification is defined for three conformance classes:

style sheet
A CSS style sheet.
renderer
A UA that interprets the semantics of a style sheet and renders documents that use them.
authoring tool
A UA that writes a style sheet.

A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module.

A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.)

An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module.

Requirements for Responsible Implementation of CSS

The following sections define several conformance requirements for implementing CSS responsibly, in a way that promotes interoperability in the present and future.

Partial Implementations

So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and ignore as appropriate) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported property values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored.

Implementations of Unstable and Proprietary Features

To avoid clashes with future stable CSS features, the CSSWG recommends following best practices for the implementation of unstable features and proprietary extensions to CSS.

Implementations of CR-level Features

Once a specification reaches the Candidate Recommendation stage, implementers should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec, and should avoid exposing a prefixed variant of that feature.

To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group.

Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at http://www.w3.org/Style/CSS/Test/. Questions should be directed to the public-css-testsuite@w3.org mailing list.

Index

Terms defined by this specification

Terms defined by reference

References

Normative References

[CSS-CASCADE-4]
Elika Etemad; Tab Atkins Jr.. CSS Cascading and Inheritance Level 4. 28 August 2018. CR. URL: https://www.w3.org/TR/css-cascade-4/
[CSS-EASING-1]
Brian Birtles; Dean Jackson; Matt Rakow. CSS Easing Functions Level 1. 30 April 2019. CR. URL: https://www.w3.org/TR/css-easing-1/
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. 6 June 2019. CR. URL: https://www.w3.org/TR/css-values-3/
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. 31 January 2019. WD. URL: https://www.w3.org/TR/css-values-4/
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 4. 30 July 2019. CR. URL: https://www.w3.org/TR/css-writing-modes-4/
[CSS3-ANIMATIONS]
Dean Jackson; et al. CSS Animations Level 1. 11 October 2018. WD. URL: https://www.w3.org/TR/css-animations-1/
[CSSOM-1]
Simon Pieters; Glenn Adams. CSS Object Model (CSSOM). 17 March 2016. WD. URL: https://www.w3.org/TR/cssom-1/
[DOM]
Anne van Kesteren. DOM Standard. Living Standard. URL: https://dom.spec.whatwg.org/
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://tools.ietf.org/html/rfc2119
[WEB-ANIMATIONS]
Brian Birtles; et al. Web Animations. 11 October 2018. WD. URL: https://www.w3.org/TR/web-animations-1/
[WebIDL]
Boris Zbarsky. Web IDL. 15 December 2016. ED. URL: https://heycam.github.io/webidl/

Informative References

[CSS-MASKING-1]
Dirk Schulze; Brian Birtles; Tab Atkins Jr.. CSS Masking Module Level 1. 26 August 2014. CR. URL: https://www.w3.org/TR/css-masking-1/
[CSS-TRANSFORMS-2]
Tab Atkins Jr.; et al. CSS Transforms Module Level 2. 3 March 2020. WD. URL: https://www.w3.org/TR/css-transforms-2/
[CSS3-TRANSITIONS]
David Baron; et al. CSS Transitions. 11 October 2018. WD. URL: https://www.w3.org/TR/css-transitions-1/
[SCROLL-ANIMATIONS]
Scroll-linked Animations. cg-draft. URL: https://wicg.github.io/scroll-animations/

Property Index

Name Value Initial Applies to Inh. %ages Ani­mat­able Anim­ation type Canonical order Com­puted value
animation-composition <single-animation-composition># replace all elements no N/A not animatable per grammar list, each item a keyword as specified
animation-timeline <single-animation-timeline># auto all elements no N/A no per grammar list, each item either a case-sensitive css identifier or the keywords none, auto.

IDL Index

[Exposed=Window]
interface CSSAnimation : Animation {
  readonly attribute CSSOMString animationName;
};

Issues Index

This differs from the behavior defined for transitions. We should probably sort transitions first, then animation, then use the global animation list. The reason being that when developer tools etc. hang on to orphaned animations and transitions in order to replay them, they should maintain roughly the same composite order.
The above procedure requires iterating over keyframe blocks in reverse. It could be rewritten so this is not required but that will likely change the behavior for some edge cases. We should verify what current implementations do and possible remove the requirement to iterate in reverse.
In practice, implementations will likely maintain specified values and variable references internally and only resolve them to computed values when getKeyframes() is called on a KeyframeEffect associated with a CSSAnimation (and, more specifically, a CSSAnimation whose effect has not been replaced and whose keyframes have not been overridden using setKeyframes()). It is not clear that soing so would produce an observable difference in behavior, however. If it does, the above procedure might need to be adjusted so that the requirement to expand variables and convert to property values to computed values is limited to the result of getKeyframes() and not the internal representation of keyframes.
Create pictures of these examples and verify they make sense.
Make it easier to use animation-name to select the timeline when animation-timeline is not specified. Allowing animation-name to be used for selecting timeline enables most common animations to have to use a single name for both their keyframes and timeline which is simple and ergonomics. The animation-timeline property gives authors additional control to independently select keyframes and timeline if necessary.