Add CSS and SVG animations, fill missing Web Animations

features/animation-composition.yml

@@ -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

features/animations-css.yml

@@ -0,0 +1,51 @@
+name: Animations (CSS)
+description: The `animation` CSS property animates an element's style over time, using keyframes described in `@keyframes` rules.
+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

features/animations-css.yml.dist

@@ -0,0 +1,182 @@
+# Generated from: animations-css.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

features/scroll-driven-animations.yml

@@ -1,7 +1,16 @@
 name: Scroll-driven animations
 description: CSS scroll-driven animations are a type of CSS animations that don't run over time, but are instead driven by the user's scroll position.
 spec: https://drafts.csswg.org/scroll-animations-1/
-group: scrolling
+group:
+  - scrolling
+  - animation
+# css.properties.animation.animation-timeline_included is not necessary to use
+# the feature, and is not supported. See https://crbug.com/337580010
+status:
+  compute_from:
+    - css.properties.animation-timeline
+    - css.properties.scroll-timeline
+    - css.properties.view-timeline
 compat_features:
   - api.ScrollTimeline
   - api.ScrollTimeline.axis
@@ -18,14 +27,11 @@ compat_features:
   - css.properties.animation-timeline
   - css.properties.animation-timeline.scroll
   - css.properties.animation-timeline.view
-  # https://crbug.com/337580010 tracks this bug, but setting the timeline via
-  # the animation shorthand is not necessary to use the feature.
-  # - css.properties.animation.animation-timeline_included
+  - css.properties.animation.animation-timeline_included
   - css.properties.scroll-timeline
   - css.properties.scroll-timeline-axis
   - css.properties.scroll-timeline-name
-  # Later addition (Chrome 116)
-  # - css.properties.timeline-scope
+  - css.properties.timeline-scope
   - css.properties.view-timeline
   - css.properties.view-timeline-axis
   - css.properties.view-timeline-inset

features/scroll-driven-animations.yml.dist

@@ -8,6 +8,12 @@ status:
     chrome_android: "115"
     edge: "115"
 compat_features:
+  # ⬇️ Same status as overall feature ⬇️
+  # baseline: false
+  # support:
+  #   chrome: "115"
+  #   chrome_android: "115"
+  #   edge: "115"
   - api.ScrollTimeline
   - api.ScrollTimeline.ScrollTimeline
   - api.ScrollTimeline.axis
@@ -30,3 +36,14 @@ compat_features:
   - css.properties.view-timeline-axis
   - css.properties.view-timeline-inset
   - css.properties.view-timeline-name
+
+  # baseline: false
+  # support:
+  #   chrome: "116"
+  #   chrome_android: "116"
+  #   edge: "116"
+  - css.properties.timeline-scope
+
+  # baseline: false
+  # support: {}
+  - css.properties.animation.animation-timeline_included