Update animation property documentation for clarity#43645
Update animation property documentation for clarity#43645
Conversation
Clarified the specification of the `animation` property, detailing the components and their order. Updated notes on `animation-timeline` and `animation-fill-mode` behavior.
github-actions
bot
added
Content:CSS
|
Preview URLs (1 page) Flaws (1) Found an unexpected or unresolvable flaw? Please report it here. URL:
(comment last updated: 2026-04-02 09:59:31) |
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
chrisdavidmills
left a comment
chrisdavidmills
left a comment
There was a problem hiding this comment.
@estelle looking much improved, nice work. I've got some comments for you.
|
|
||
| One or more single `<animation>` declarations, separated by commas, with each `<animation>` including: | ||
|
|
||
| - `<single-animation-name>` |
There was a problem hiding this comment.
You should check the type names in the spec to make sure they match with the ones stated here. For example, <keyframes-name> now seems to be used in place of <single-animation-name>.
|
|
||
| ### Values | ||
|
|
||
| One or more single `<animation>` declarations, separated by commas, with each `<animation>` including: |
There was a problem hiding this comment.
The order of the components being used in the constituent properties list, the syntax examples, and the values list seems to differ. Would it be more intuitive to make them all the same, and make them equal to the recommended order to place the components in?
| - The names of a {{cssxref("@keyframes")}} at-rules that describes the animation to apply to an element. The initial value for {{cssxref("animation-name")}} is `none`. | ||
| - `<single-easing-function>` | ||
| - : Determines the type of transition. The value must be one of those available in {{cssxref("easing-function")}}. | ||
| - : Determines the type of transition. The value must be one of those available in {{cssxref("easing-function")}}. The initial value for {{cssxref("animation-timing-function")}} is `ease`. |
There was a problem hiding this comment.
| - : Determines the type of transition. The value must be one of those available in {{cssxref("easing-function")}}. The initial value for {{cssxref("animation-timing-function")}} is `ease`. | |
| - : Determines the type of transition. The value must be one of those available in {{cssxref("easing-function")}}. The initial value for {{cssxref("easing-function")}} is `ease`. |
| - `<single-animation-play-state>` | ||
| - : Determines whether the animation is playing or not. The value must be one of those available in {{cssxref("animation-play-state")}}. | ||
| - : Determines whether the animation is playing or not. The value must be one of those available in {{cssxref("animation-play-state")}}. The initial value for {{cssxref("animation-play-state")}} is `running`. | ||
| - `<single-animation-delay>` |
There was a problem hiding this comment.
Say what the value must be for these two additions to be consistent with the other components?
|
|
||
| One or more single `<animation>` declarations, separated by commas, with each `<animation>` including: | ||
|
|
||
| - `<single-animation-name>` |
There was a problem hiding this comment.
<animation-timeline> is not included in this list.
|
|
||
| One or more single `<animation>` declarations, separated by commas, with each `<animation>` including: | ||
|
|
||
| - `<single-animation-name>` |
There was a problem hiding this comment.
Ooop, also, by the looks of the preview doc, the DL formatting looks broken.
Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
3 participants
Clarified the specification of the
animationproperty, detailing the components and their order. Updated notes onanimation-timelineandanimation-fill-modebehavior.animation-range-startandanimation-range-endwere listed as part of the shorthand, but they aren't, and they aren't reset by the shorthan.