Skip to content

[css-animations] Behavior when keyframe identifier is duplicated in animation-name #342

@ChumpChief

Description

@ChumpChief

Spec: https://drafts.csswg.org/css-animations-1/#animation-name

Chrome and Firefox both support duplicate usage of a keyframe identifier in animation-name, while Edge does not (uses the last in the list instead). We've seen a handful of sites relying on this behavior to perform multiple "iterations" with varying durations and/or delays.

Example of this pattern:
https://jsfiddle.net/435c36qL/

It would be good to clarify this behavior in the spec. Particularly since the last resolution I could find on this subject seemed to resolve the opposite -- that only the last should apply:
http://lists.w3.org/Archives/Public/www-style/2012Nov/0261.html

An added statement to the animation-name section along these lines would help I think:
"Multiple occurrences of the same keyframe name are allowed, and each defines a separate animation."

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions