fix(css): update animation tips page #34827
Conversation
github-actions
bot
added
Content:CSS
|
Preview URLs
(comment last updated: 2024-08-08 17:21:19) |
There was a problem hiding this comment.
the edits convert this CSS animation tips page to a web animations API guide. As this is a CSS tips and tricks page, not a web animations API page, I think we should keep keyframe animations in the page rather than create animations with JS. Alternatively, we can remove much of the content here and move it to the API section.
|
We don't have to resort to/suggest tricks if better ways are available. Unfortunately, the Web Animation API went completely separate ways and it doesn't gel with CSS animations. Web Animation API uses I've filed an issue to make the legacy CSS stylesheet-defined animations work with Web Animation API.
Moved the page to the Web Animation API content area. |
|
This pull request has merge conflicts that must be resolved before it can be merged. |
OnkarRuikar
force-pushed
the
css_animation_tips
branch
from
582e7c9
to
c96bda3
Compare
Co-authored-by: Estelle Weyl <[email protected]>
Co-authored-by: Estelle Weyl <[email protected]>
OnkarRuikar
force-pushed
the
css_animation_tips
branch
from
21d747a
to
a7433ed
Compare
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
| @@ -61,8 +61,8 @@ All animations, even those with 0 seconds duration, throw animation events. | |||
|
|
|||
| - [Using CSS animations](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) | |||
| - : Step-by-step tutorial on how to create animations using CSS. This article describes the animation-related CSS properties and at-rule and how they interact with each other. | |||
| - [CSS animation tips and tricks](/en-US/docs/Web/CSS/CSS_animations/Tips) | |||
| - : Tips and tricks to help you get the most out of CSS animations. | |||
| - - [Using the Web Animations API](/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API) | |||
There was a problem hiding this comment.
Typo here; can either of you send a follow up?
There is no need to use tricks to achieve the discussed tips on the page. As we have to resort to JS then the Web animation API is the best way to achieve this. The new API also makes the examples simple.
The PR uses
element.animate()andelement.getAnimations()method in the examples.