-
Notifications
You must be signed in to change notification settings - Fork 64
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add CSS and SVG animations, fill missing Web Animations #1771
base: main
Are you sure you want to change the base?
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,4 @@ | ||
name: animation-composition | ||
description: The `animation-composition` CSS property chooses how to combine animations that affect the same property. | ||
spec: https://drafts.csswg.org/css-animations-2/#animation-composition | ||
group: animation |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
name: CSS Animations | ||
description: The `animation` CSS property applies `@keyframes` animation sequences to transform elements. | ||
spec: https://drafts.csswg.org/css-animations-2/ | ||
caniuse: css-animation | ||
group: | ||
- animation | ||
- css | ||
status: | ||
compute_from: css.properties.animation | ||
compat_features: | ||
- api.AnimationEvent | ||
- api.AnimationEvent.AnimationEvent | ||
- api.AnimationEvent.animationName | ||
- api.AnimationEvent.elapsedTime | ||
- api.AnimationEvent.pseudoElement | ||
- api.CSSAnimation | ||
- api.CSSAnimation.animationName | ||
- api.CSSKeyframeRule | ||
- api.CSSKeyframeRule.keyText | ||
- api.CSSKeyframeRule.style | ||
- api.CSSKeyframesRule | ||
- api.CSSKeyframesRule.appendRule | ||
- api.CSSKeyframesRule.cssRules | ||
- api.CSSKeyframesRule.deleteRule | ||
- api.CSSKeyframesRule.findRule | ||
- api.CSSKeyframesRule.length | ||
- api.CSSKeyframesRule.name | ||
- css.at-rules.keyframes | ||
- css.properties.animation | ||
- css.properties.animation-delay | ||
- css.properties.animation-direction | ||
- css.properties.animation-direction.alternate | ||
- css.properties.animation-direction.alternate-reverse | ||
- css.properties.animation-direction.normal | ||
- css.properties.animation-direction.reverse | ||
- css.properties.animation-duration | ||
- css.properties.animation-duration.auto | ||
- css.properties.animation-fill-mode | ||
- css.properties.animation-fill-mode.backwards | ||
- css.properties.animation-fill-mode.both | ||
- css.properties.animation-fill-mode.forwards | ||
- css.properties.animation-fill-mode.none | ||
- css.properties.animation-iteration-count | ||
- css.properties.animation-iteration-count.infinite | ||
- css.properties.animation-name | ||
- css.properties.animation-name.none | ||
- css.properties.animation-play-state | ||
- css.properties.animation-play-state.paused | ||
- css.properties.animation-play-state.running | ||
- css.properties.animation-timing-function | ||
- css.properties.animation-timing-function.jump |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,182 @@ | ||
# Generated from: css-animations.yml | ||
# Do not edit this file by hand. Edit the source file instead! | ||
|
||
status: | ||
baseline: high | ||
baseline_low_date: 2015-09-30 | ||
baseline_high_date: 2018-03-30 | ||
support: | ||
chrome: "43" | ||
chrome_android: "43" | ||
edge: "12" | ||
firefox: "16" | ||
firefox_android: "16" | ||
safari: "9" | ||
safari_ios: "9" | ||
compat_features: | ||
# baseline: high | ||
# baseline_low_date: 2015-09-30 | ||
# baseline_high_date: 2018-03-30 | ||
# support: | ||
# chrome: "43" | ||
# chrome_android: "43" | ||
# edge: "12" | ||
# firefox: "5" | ||
# firefox_android: "5" | ||
# safari: "9" | ||
# safari_ios: "9" | ||
- api.AnimationEvent | ||
- api.AnimationEvent.animationName | ||
- api.AnimationEvent.elapsedTime | ||
|
||
# ⬇️ Same status as overall feature ⬇️ | ||
# baseline: high | ||
# baseline_low_date: 2015-09-30 | ||
# baseline_high_date: 2018-03-30 | ||
# support: | ||
# chrome: "43" | ||
# chrome_android: "43" | ||
# edge: "12" | ||
# firefox: "16" | ||
# firefox_android: "16" | ||
# safari: "9" | ||
# safari_ios: "9" | ||
- css.at-rules.keyframes | ||
- css.properties.animation | ||
- css.properties.animation-delay | ||
- css.properties.animation-direction | ||
- css.properties.animation-direction.alternate | ||
- css.properties.animation-direction.alternate-reverse | ||
- css.properties.animation-direction.normal | ||
- css.properties.animation-direction.reverse | ||
- css.properties.animation-duration | ||
- css.properties.animation-fill-mode | ||
- css.properties.animation-fill-mode.backwards | ||
- css.properties.animation-fill-mode.both | ||
- css.properties.animation-fill-mode.forwards | ||
- css.properties.animation-fill-mode.none | ||
- css.properties.animation-iteration-count | ||
- css.properties.animation-iteration-count.infinite | ||
- css.properties.animation-name | ||
- css.properties.animation-name.none | ||
- css.properties.animation-play-state | ||
- css.properties.animation-play-state.paused | ||
- css.properties.animation-play-state.running | ||
- css.properties.animation-timing-function | ||
|
||
# baseline: high | ||
# baseline_low_date: 2016-08-02 | ||
# baseline_high_date: 2019-02-02 | ||
# support: | ||
# chrome: "31" | ||
# chrome_android: "31" | ||
# edge: "12" | ||
# firefox: "48" | ||
# firefox_android: "48" | ||
# safari: "9" | ||
# safari_ios: "9" | ||
- api.CSSKeyframeRule | ||
- api.CSSKeyframeRule.keyText | ||
- api.CSSKeyframeRule.style | ||
|
||
# baseline: high | ||
# baseline_low_date: 2016-08-02 | ||
# baseline_high_date: 2019-02-02 | ||
# support: | ||
# chrome: "31" | ||
# chrome_android: "31" | ||
# edge: "12" | ||
# firefox: "48" | ||
# firefox_android: "48" | ||
# safari: "9.1" | ||
# safari_ios: "9.3" | ||
- api.CSSKeyframesRule | ||
- api.CSSKeyframesRule.cssRules | ||
- api.CSSKeyframesRule.deleteRule | ||
- api.CSSKeyframesRule.findRule | ||
- api.CSSKeyframesRule.name | ||
|
||
# baseline: high | ||
# baseline_low_date: 2016-08-02 | ||
# baseline_high_date: 2019-02-02 | ||
# support: | ||
# chrome: "41" | ||
# chrome_android: "41" | ||
# edge: "12" | ||
# firefox: "48" | ||
# firefox_android: "48" | ||
# safari: "9.1" | ||
# safari_ios: "9.3" | ||
- api.CSSKeyframesRule.appendRule | ||
|
||
# baseline: high | ||
# baseline_low_date: 2016-08-02 | ||
# baseline_high_date: 2019-02-02 | ||
# support: | ||
# chrome: "43" | ||
# chrome_android: "43" | ||
# edge: "14" | ||
# firefox: "23" | ||
# firefox_android: "23" | ||
# safari: "9" | ||
# safari_ios: "9" | ||
- api.AnimationEvent.AnimationEvent | ||
|
||
# baseline: high | ||
# baseline_low_date: 2020-03-24 | ||
# baseline_high_date: 2022-09-24 | ||
# support: | ||
# chrome: "68" | ||
# chrome_android: "68" | ||
# edge: "79" | ||
# firefox: "23" | ||
# firefox_android: "23" | ||
# safari: "13.1" | ||
# safari_ios: "13.4" | ||
- api.AnimationEvent.pseudoElement | ||
|
||
# baseline: high | ||
# baseline_low_date: 2020-07-28 | ||
# baseline_high_date: 2023-01-28 | ||
# support: | ||
# chrome: "84" | ||
# chrome_android: "84" | ||
# edge: "84" | ||
# firefox: "75" | ||
# firefox_android: "79" | ||
# safari: "13.1" | ||
# safari_ios: "13.4" | ||
- api.CSSAnimation | ||
- api.CSSAnimation.animationName | ||
|
||
# baseline: high | ||
# baseline_low_date: 2020-09-16 | ||
# baseline_high_date: 2023-03-16 | ||
# support: | ||
# chrome: "77" | ||
# chrome_android: "77" | ||
# edge: "79" | ||
# firefox: "65" | ||
# firefox_android: "65" | ||
# safari: "14" | ||
# safari_ios: "14" | ||
- css.properties.animation-timing-function.jump | ||
|
||
# baseline: low | ||
# baseline_low_date: 2024-03-22 | ||
# support: | ||
# chrome: "123" | ||
# chrome_android: "123" | ||
# edge: "123" | ||
# firefox: "109" | ||
# firefox_android: "109" | ||
# safari: "17" | ||
# safari_ios: "17" | ||
- api.CSSKeyframesRule.length | ||
|
||
# baseline: false | ||
# support: | ||
# chrome: "115" | ||
# chrome_android: "115" | ||
# edge: "115" | ||
- css.properties.animation-duration.auto |
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think what prompted me to talk about attributes is that we describe CSS animations as animating an element's styles. 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. |
||||||
spec: https://svgwg.org/specs/animations/ | ||||||
caniuse: svg-smil | ||||||
group: | ||||||
- animation | ||||||
- svg | ||||||
status: | ||||||
compute_from: svg.global_attributes.class.animation_support | ||||||
captainbrosset marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
compat_features: | ||||||
- api.SVGAnimateColorElement | ||||||
- api.SVGAnimateElement | ||||||
- api.SVGAnimateMotionElement | ||||||
- api.SVGAnimateTransformElement | ||||||
- api.SVGAnimatedAngle | ||||||
- api.SVGAnimatedAngle.animVal | ||||||
- api.SVGAnimatedAngle.baseVal | ||||||
- api.SVGAnimatedBoolean | ||||||
- api.SVGAnimatedBoolean.animVal | ||||||
- api.SVGAnimatedBoolean.baseVal | ||||||
- api.SVGAnimatedEnumeration | ||||||
- api.SVGAnimatedEnumeration.animVal | ||||||
- api.SVGAnimatedEnumeration.baseVal | ||||||
- api.SVGAnimatedInteger | ||||||
- api.SVGAnimatedInteger.animVal | ||||||
- api.SVGAnimatedInteger.baseVal | ||||||
- api.SVGAnimatedLength | ||||||
- api.SVGAnimatedLength.animVal | ||||||
- api.SVGAnimatedLength.baseVal | ||||||
- api.SVGAnimatedLengthList | ||||||
- api.SVGAnimatedLengthList.animVal | ||||||
- api.SVGAnimatedLengthList.baseVal | ||||||
- api.SVGAnimatedNumber | ||||||
- api.SVGAnimatedNumber.animVal | ||||||
- api.SVGAnimatedNumber.baseVal | ||||||
- api.SVGAnimatedNumberList | ||||||
- api.SVGAnimatedNumberList.animVal | ||||||
- api.SVGAnimatedNumberList.baseVal | ||||||
- api.SVGAnimatedPreserveAspectRatio | ||||||
- api.SVGAnimatedPreserveAspectRatio.animVal | ||||||
- api.SVGAnimatedPreserveAspectRatio.baseVal | ||||||
- api.SVGAnimatedRect | ||||||
- api.SVGAnimatedRect.animVal | ||||||
- api.SVGAnimatedRect.baseVal | ||||||
- api.SVGAnimatedString | ||||||
- api.SVGAnimatedString.animVal | ||||||
- api.SVGAnimatedString.baseVal | ||||||
- api.SVGAnimatedTransformList | ||||||
- api.SVGAnimatedTransformList.animVal | ||||||
- api.SVGAnimatedTransformList.baseVal | ||||||
- api.SVGAnimationElement | ||||||
- api.SVGAnimationElement.beginElement | ||||||
- api.SVGAnimationElement.beginElementAt | ||||||
- api.SVGAnimationElement.beginEvent_event | ||||||
- api.SVGAnimationElement.endElement | ||||||
- api.SVGAnimationElement.endElementAt | ||||||
- api.SVGAnimationElement.endEvent_event | ||||||
- api.SVGAnimationElement.getCurrentTime | ||||||
- api.SVGAnimationElement.getSimpleDuration | ||||||
- api.SVGAnimationElement.getStartTime | ||||||
- api.SVGAnimationElement.repeatEvent_event | ||||||
- api.SVGAnimationElement.requiredExtensions | ||||||
- api.SVGAnimationElement.systemLanguage | ||||||
- api.SVGAnimationElement.targetElement | ||||||
- api.SVGPolygonElement.animatedPoints | ||||||
- api.SVGPolylineElement.animatedPoints | ||||||
- api.SVGSVGElement.animationsPaused | ||||||
- api.SVGSVGElement.pauseAnimations | ||||||
- api.SVGSVGElement.unpauseAnimations | ||||||
- svg.elements.animate | ||||||
- svg.elements.animate.attributeName | ||||||
- svg.elements.animate.attributeType | ||||||
- svg.elements.animate.dur | ||||||
- svg.elements.animate.fill | ||||||
- svg.elements.animate.from | ||||||
- svg.elements.animate.href | ||||||
- svg.elements.animate.repeatCount | ||||||
- svg.elements.animate.systemLanguage | ||||||
- svg.elements.animate.to | ||||||
- svg.elements.animateMotion | ||||||
- svg.elements.animateMotion.calcMode | ||||||
- svg.elements.animateMotion.fill | ||||||
- svg.elements.animateMotion.href | ||||||
- svg.elements.animateMotion.keyPoints | ||||||
- svg.elements.animateMotion.origin | ||||||
- svg.elements.animateMotion.path | ||||||
- svg.elements.animateMotion.rotate | ||||||
- svg.elements.animateMotion.systemLanguage | ||||||
- svg.elements.animateTransform | ||||||
- svg.elements.animateTransform.by | ||||||
- svg.elements.animateTransform.fill | ||||||
- svg.elements.animateTransform.from | ||||||
- svg.elements.animateTransform.href | ||||||
- svg.elements.animateTransform.systemLanguage | ||||||
- svg.elements.animateTransform.to | ||||||
- svg.elements.animateTransform.type | ||||||
- svg.global_attributes.class.animation_support |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.