Add CSS and SVG animations, fill missing Web Animations #1771
Conversation
github-actions
bot
added
the
feature definition
features/css-animations.yml
Outdated
| @@ -0,0 +1,51 @@ | |||
| name: CSS Animations | |||
| description: The `animation` CSS property applies `@keyframes` animation sequences to transform elements. | |||
There was a problem hiding this comment.
| description: The `animation` CSS property applies `@keyframes` animation sequences to transform elements. | |
| description: The `animation` CSS property animates an element's style over time, using keyframes described in `@keyframes` rules. |
Wanted to propose an alt description because I wasn't super keen on using the word "transform", since it could be interpreted as CSS transforms. And because I thought it was important to mention the time component of CSS animations, to separate this feature from the scroll-driven animations feature.
| @@ -0,0 +1,97 @@ | |||
| name: SVG animations | |||
| description: The `<animate>`, `<animateMotion>`, and `<animateTransform>` SVG elements declaratively animate SVG elements. Also known as SMIL. | |||
There was a problem hiding this comment.
| description: The `<animate>`, `<animateMotion>`, and `<animateTransform>` SVG elements declaratively animate SVG elements. Also known as SMIL. | |
| description: The `<animate>`, `<animateMotion>`, and `<animateTransform>` SVG elements animate an SVG element's attributes over time. Also known as SMIL. |
Here I also think we should mention the over time concept, and maybe also mention that it's the attributes that get animated (if I'm not mistaken)
There was a problem hiding this comment.
Can you explain the significance of differentiating between the element and the element's attributes? Perhaps a poor analogy, but I think of it as "You press the gas pedal to turn the wheels" vs "You press the gas pedal to move the car"- the intended outcome is moving the car, and the wheels are somewhat incidental.
There was a problem hiding this comment.
I think what prompted me to talk about attributes is that we describe CSS animations as animating an element's styles.
So, I felt compelled to mention exactly what were SVG animations animating.
Animating an element feels quite abstract to me, but perhaps it's just me. I won't block on this. If you prefer "animate SVG elements", go for it.
| @@ -0,0 +1,97 @@ | |||
| name: SVG animations | |||
| description: The `<animate>`, `<animateMotion>`, and `<animateTransform>` SVG elements declaratively animate SVG elements. Also known as SMIL. | |||
There was a problem hiding this comment.
I think what prompted me to talk about attributes is that we describe CSS animations as animating an element's styles.
So, I felt compelled to mention exactly what were SVG animations animating.
Animating an element feels quite abstract to me, but perhaps it's just me. I won't block on this. If you prefer "animate SVG elements", go for it.
This is mostly backfilling older functionality. It adds a new Animation Group as well.
Low/false baseline items did not seem particularly feature-worthy.