Updates related to the animation-composition property #19940

dipikabh · 2022-08-24T21:50:29Z

Summary

This PR adds a link to the new animation-composition property ([CSS] New property page for animation-composition #19848)
Other edits are for ensuring consistency among the animation property pages
In "Using_CSS_animations", the properties have been sorted alphabetically.

Related issues

Doc issue tracker: #18771

Metadata

Adds a new document
Rewrites (or significantly expands) a document
Fixes a typo, bug, or other error

github-actions · 2022-08-24T21:53:24Z

Preview URLs

Flaws

Note! 8 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/CSS/CSS_Animations
Title: CSS Animations
on GitHub
Flaw count: 1

macros:
- /en-US/docs/Web/CSS/animation-composition does not exist

URL: /en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
Title: Using CSS animations
on GitHub
Flaw count: 2

macros:
- /en-US/docs/Web/CSS/animation-composition does not exist
- /en-US/docs/Glossary/Composite_operation does not exist

URL: /en-US/docs/Web/API/AnimationEvent
Title: AnimationEvent
on GitHub
Flaw count: 1

macros:
- /en-US/docs/Web/CSS/animation-composition does not exist

External URLs

URL: /en-US/docs/Web/CSS/animation-fill-mode
Title: animation-fill-mode
on GitHub

No new external URLs

URL: /en-US/docs/Web/CSS/animation-name
Title: animation-name
on GitHub

No new external URLs

URL: /en-US/docs/Web/CSS/animation-timing-function
Title: animation-timing-function
on GitHub

No new external URLs

URL: /en-US/docs/Web/CSS/animation-delay
Title: animation-delay
on GitHub

No new external URLs

URL: /en-US/docs/Web/CSS/animation-play-state
Title: animation-play-state
on GitHub

No new external URLs

URL: /en-US/docs/Web/CSS/CSS_Animations
Title: CSS Animations
on GitHub

No new external URLs

URL: /en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
Title: Using CSS animations
on GitHub

No new external URLs

URL: /en-US/docs/Web/CSS/animation-iteration-count
Title: animation-iteration-count
on GitHub

No new external URLs

URL: /en-US/docs/Web/CSS/animation-direction
Title: animation-direction
on GitHub

No new external URLs

URL: /en-US/docs/Web/CSS/animation-duration
Title: animation-duration
on GitHub

No new external URLs

URL: /en-US/docs/Web/API/AnimationEvent
Title: AnimationEvent
on GitHub

No new external URLs

(this comment was updated 2022-09-01 11:00:39.150240)

files/en-us/web/css/css_animations/using_css_animations/index.md

estelle · 2022-08-24T22:29:58Z

files/en-us/web/css/css_animations/using_css_animations/index.md


 ```css
 animation-name: fadeInOut, moveLeft300px, bounce;
 animation-duration: 2.5s, 5s, 1s;
 animation-iteration-count: 2, 1, 5;
 ```

-In this third case, there are three animations specified, but only two durations and iteration counts. In such cases where there are not enough values to give a separate value to each animation, the values cycle from start to finish. So for example, fadeInOut gets a duration of 2.5s and moveLeft300px gets a duration of 5s. We've now got to the end of the available duration values, so we start from the beginning again — bounce therefore gets a duration of 2.5s. The iteration counts (and any other property values you specify) will be assigned in the same way.
+In this third example, three animations are specified, but only two durations and iteration counts. In such cases where there are not enough values in the list to assign a separate one to each animation, the value assignment cycles from the first to the last item in the available list and then resets to the first tem. So, `fadeInOut` gets a duration of `2.5s`, and `moveLeft300px` gets a duration of `5s`, which is the last value in the list of duration values. The duration value assignment now resets to the first value; `bounce`, therefore, gets a duration of `2.5s`. The iteration count values (and any other property values you specify) will be assigned in the same way.


Suggested change

In this third example, three animations are specified, but only two durations and iteration counts. In such cases where there are not enough values in the list to assign a separate one to each animation, the value assignment cycles from the first to the last item in the available list and then resets to the first tem. So, `fadeInOut` gets a duration of `2.5s`, and `moveLeft300px` gets a duration of `5s`, which is the last value in the list of duration values. The duration value assignment now resets to the first value; `bounce`, therefore, gets a duration of `2.5s`. The iteration count values (and any other property values you specify) will be assigned in the same way.

In this third example, three animations are specified, but only two durations and iteration counts. In such cases where there are not enough values in the list of durations to assign a separate one to each animation, the value assignment cycles from the first to the last item in the available list and then cycles back to the first item. So, `fadeInOut` gets a duration of `2.5s`, and `moveLeft300px` gets a duration of `5s`, which is the last value in the list of duration values. The duration value assignment now resets to the first value; `bounce`, therefore, gets a duration of `2.5s`. The iteration count values (and any other property values you specify) will be assigned in the same way.

If the mismatched length lists are inverted -- for example, if there are five `animation-duration` values for three `animation-name` values -- the extraneous animation property values, in this case, two `animation-duration` values, don't apply to any animation and are ignored.

It would be good to give this section and #### title, so we can link to it directly from the five animation pages where we have:

see Setting multiple animation property values.

This is a great suggestion. As I started working through it, I ended up pulling out "Using the animation shorthand" and "Setting multiple animation property values" sections from inside "Examples" and turned them from ### to ##.

I started to add ###s under "Setting multiple animation property values" as you've suggested but it seems two cases in the "Setting multiple animation property values" section are applicable in the other animation pages where we have that note. So it might not be worth adding the ###s and linking to just the last case.

BTW, thank you for suggesting the text for the inverse case 👍.

files/en-us/web/css/css_animations/using_css_animations/index.md

files/en-us/web/css/css_animations/index.md

files/en-us/web/css/css_animations/using_css_animations/index.md

estelle · 2022-08-25T19:01:41Z

files/en-us/web/css/css_animations/using_css_animations/index.md

+```
+
+To learn more about the sequence in which different animation property values can be specified using the `animation` shorthand, see the {{cssxref("animation")}} reference page.
+


should we add a warning to recommend putting the name last, since if a keyframe name is a keyword, the browser assumes the first instance is the keyword, not the name.

Text to this effect is present on the animation page, which is where the link is pointing.
(The sequence of sections on the 'animation' page does not seem consistent with other pages. I'll open another PR to fix that.)

estelle · 2022-08-25T19:04:41Z

Just three questions, then we're good to go.
I thought this had a glossary entry.... now I need to go find that to review.

estelle · 2022-08-26T18:10:35Z

I am on vacation next week. But my review isn't blocking

estelle · 2022-08-27T02:42:25Z

w3c/csswg-drafts#1594 provides an even better example.

dipikabh · 2022-08-29T12:51:39Z

Just three questions, then we're good to go. I thought this had a glossary entry.... now I need to go find that to review.

You'll find the glossary update in the other PR 🙂

Elchi3

(I'm not a CSS expert, not sure why I'm getting CSS review requests)

I skimmed over this and it looks good to me and it seems Estelle's comments are addressed, so approving. Feel free to merge (Estelle also said nothing blocking anymore).

bsmth · 2022-09-01T11:03:37Z

Going to merge this one now, thanks all 👍🏻

dipikabh · 2022-09-01T12:49:15Z

Thanks, @bsmth!

* Adds link to animation-composition plus other edits * Fixes errors * Fixes review comments * Fixes review comments Co-authored-by: Brian Thomas Smith <brian@smith.berlin>

github-actions bot added Content:CSS Cascading Style Sheets docs Content:WebAPI Web API docs labels Aug 24, 2022

dipikabh marked this pull request as ready for review August 24, 2022 22:11

dipikabh requested review from a team as code owners August 24, 2022 22:11

dipikabh requested review from Elchi3 and estelle and removed request for a team August 24, 2022 22:11

estelle reviewed Aug 24, 2022

View reviewed changes

files/en-us/web/css/css_animations/using_css_animations/index.md Outdated Show resolved Hide resolved

estelle reviewed Aug 24, 2022

View reviewed changes

files/en-us/web/css/css_animations/using_css_animations/index.md Show resolved Hide resolved

estelle reviewed Aug 24, 2022

View reviewed changes

files/en-us/web/css/css_animations/using_css_animations/index.md Outdated Show resolved Hide resolved

estelle reviewed Aug 24, 2022

View reviewed changes

files/en-us/web/css/css_animations/using_css_animations/index.md Outdated Show resolved Hide resolved

estelle reviewed Aug 24, 2022

View reviewed changes

files/en-us/web/css/css_animations/using_css_animations/index.md Outdated Show resolved Hide resolved

estelle reviewed Aug 24, 2022

View reviewed changes

files/en-us/web/css/css_animations/using_css_animations/index.md Outdated Show resolved Hide resolved

dipikabh force-pushed the anim-composition-related branch from dfd1abe to eb2a577 Compare August 25, 2022 17:35

dipikabh mentioned this pull request Aug 25, 2022

[CSS] Implement CSS animation-composition #18771

Closed

7 tasks

dipikabh requested a review from estelle August 25, 2022 17:39

estelle reviewed Aug 25, 2022

View reviewed changes

files/en-us/web/css/css_animations/index.md Show resolved Hide resolved

estelle reviewed Aug 25, 2022

View reviewed changes

files/en-us/web/css/css_animations/using_css_animations/index.md Outdated Show resolved Hide resolved

estelle reviewed Aug 25, 2022

View reviewed changes

dipikabh added 4 commits August 29, 2022 13:56

Adds link to animation-composition plus other edits

ee8a686

Fixes errors

0577a9d

Fixes review comments

2343435

Fixes review comments

c680c01

dipikabh force-pushed the anim-composition-related branch from eb2a577 to c680c01 Compare August 29, 2022 12:46

Elchi3 approved these changes Aug 30, 2022

View reviewed changes

dipikabh self-assigned this Aug 31, 2022

Merge branch 'main' into anim-composition-related

d490651

bsmth merged commit 04b17a3 into mdn:main Sep 1, 2022

dipikabh deleted the anim-composition-related branch September 2, 2022 13:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Updates related to the animation-composition property #19940

Updates related to the animation-composition property #19940

dipikabh commented Aug 24, 2022 •

edited

github-actions bot commented Aug 24, 2022 •

edited

estelle Aug 24, 2022 •

edited

estelle Aug 24, 2022

dipikabh Aug 25, 2022

estelle Aug 25, 2022

dipikabh Aug 29, 2022

estelle commented Aug 25, 2022 •

edited

estelle commented Aug 26, 2022

estelle commented Aug 27, 2022

dipikabh commented Aug 29, 2022 •

edited

Elchi3 left a comment

bsmth commented Sep 1, 2022

dipikabh commented Sep 1, 2022

-In this third example, three animations are specified, but only two durations and iteration counts. In such cases where there are not enough values in the list to assign a separate one to each animation, the value assignment cycles from the first to the last item in the available list and then resets to the first tem. So, `fadeInOut` gets a duration of `2.5s`, and `moveLeft300px` gets a duration of `5s`, which is the last value in the list of duration values. The duration value assignment now resets to the first value; `bounce`, therefore, gets a duration of `2.5s`. The iteration count values (and any other property values you specify) will be assigned in the same way.
+In this third example, three animations are specified, but only two durations and iteration counts. In such cases where there are not enough values in the list of durations to assign a separate one to each animation, the value assignment cycles from the first to the last item in the available list and then cycles back to the first item. So, `fadeInOut` gets a duration of `2.5s`, and `moveLeft300px` gets a duration of `5s`, which is the last value in the list of duration values. The duration value assignment now resets to the first value; `bounce`, therefore, gets a duration of `2.5s`. The iteration count values (and any other property values you specify) will be assigned in the same way.
+If the mismatched length lists are inverted -- for example, if there are five `animation-duration` values for three `animation-name` values -- the extraneous animation property values, in this case, two `animation-duration` values, don't apply to any animation and are ignored.

		```

		To learn more about the sequence in which different animation property values can be specified using the `animation` shorthand, see the {{cssxref("animation")}} reference page.

Updates related to the animation-composition property #19940

Updates related to the animation-composition property #19940

Conversation

dipikabh commented Aug 24, 2022 • edited

Summary

Related issues

Metadata

github-actions bot commented Aug 24, 2022 • edited

Preview URLs

Flaws

External URLs

estelle Aug 24, 2022 • edited

Choose a reason for hiding this comment

estelle Aug 24, 2022

Choose a reason for hiding this comment

dipikabh Aug 25, 2022

Choose a reason for hiding this comment

estelle Aug 25, 2022

Choose a reason for hiding this comment

dipikabh Aug 29, 2022

Choose a reason for hiding this comment

estelle commented Aug 25, 2022 • edited

estelle commented Aug 26, 2022

estelle commented Aug 27, 2022

dipikabh commented Aug 29, 2022 • edited

Elchi3 left a comment

Choose a reason for hiding this comment

bsmth commented Sep 1, 2022

dipikabh commented Sep 1, 2022

dipikabh commented Aug 24, 2022 •

edited

github-actions bot commented Aug 24, 2022 •

edited

estelle Aug 24, 2022 •

edited

estelle commented Aug 25, 2022 •

edited

dipikabh commented Aug 29, 2022 •

edited