Skip to content

CSS: Support comma-separated values for animation* properties #3319

Open
@AtkinsSJ

Description

Elements can have multiple animations at once, so the animation properties accept comma-separated lists of values. Currently we only accept a single value for each of these:

  • animation
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-iteration-count
  • animation-direction
  • animation-play-state
  • animation-delay
  • animation-fill-mode

This works similarly to background and its longhand properties.

Each animation listed by name should have a corresponding value for the other animation properties listed below. If the lists of values for the other animation properties do not have the same length, the length of the animation-name list determines the number of items in each list examined when starting animations. The lists are matched up from the first value: excess values at the end are not used. If one of the other properties doesn’t have enough comma-separated values to match the number of values of animation-name, the UA must calculate its used value by repeating the list of values until there are enough. This truncation or repetition does not affect the computed value.

As part of this, we'll also need to be able to start multiple animations at once for an element, instead of just one.

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