From 9a62225073a2a74588892eb389ca8b2d34b127f9 Mon Sep 17 00:00:00 2001 From: Victor Allen Date: Tue, 15 Oct 2024 08:50:04 -0700 Subject: [PATCH] Adds CSS transitions feature (#1919) --- features/transition-behavior.yml | 2 +- features/transitions.yml | 26 +++++++ features/transitions.yml.dist | 130 +++++++++++++++++++++++++++++++ groups/transitions.yml | 3 + 4 files changed, 160 insertions(+), 1 deletion(-) create mode 100644 features/transitions.yml create mode 100644 features/transitions.yml.dist create mode 100644 groups/transitions.yml diff --git a/features/transition-behavior.yml b/features/transition-behavior.yml index df7bdab4f5e..92c506028c7 100644 --- a/features/transition-behavior.yml +++ b/features/transition-behavior.yml @@ -1,4 +1,4 @@ name: transition-behavior description: "The `transition-behavior: allow-discrete` CSS declaration allows transitions for properties whose animation behavior is discrete. Such properties can't be interpolated and swap from their start value to the end value at 50%." spec: https://drafts.csswg.org/css-transitions-2/#transition-behavior-property -group: css +group: transitions diff --git a/features/transitions.yml b/features/transitions.yml new file mode 100644 index 00000000000..be9380c86d0 --- /dev/null +++ b/features/transitions.yml @@ -0,0 +1,26 @@ +name: Transitions (CSS) +description: The `transition` shorthand CSS property sets how changes to an element's styles may occur over time. Transitions can be applied to specific CSS properties, all properties, or none. +spec: https://drafts.csswg.org/css-transitions-2/ +caniuse: css-transitions +group: transitions +status: + compute_from: css.properties.transition +compat_features: + - api.CSSTransition + - api.CSSTransition.transitionProperty + - api.Element.transitioncancel_event + - api.Element.transitionend_event + - api.Element.transitionrun_event + - api.Element.transitionstart_event + - api.TransitionEvent + - api.TransitionEvent.elapsedTime + - api.TransitionEvent.propertyName + - api.TransitionEvent.pseudoElement + - api.TransitionEvent.TransitionEvent + - css.properties.transition + - css.properties.transition-delay + - css.properties.transition-duration + - css.properties.transition-property + - css.properties.transition-property.all + - css.properties.transition-property.none + - css.properties.transition-timing-function diff --git a/features/transitions.yml.dist b/features/transitions.yml.dist new file mode 100644 index 00000000000..e6a007c8f98 --- /dev/null +++ b/features/transitions.yml.dist @@ -0,0 +1,130 @@ +# Generated from: transitions.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: "26" + chrome_android: "26" + edge: "12" + firefox: "16" + firefox_android: "16" + safari: "9" + safari_ios: "9" +compat_features: + # baseline: high + # baseline_low_date: 2015-07-29 + # baseline_high_date: 2018-01-29 + # support: + # chrome: "27" + # chrome_android: "27" + # edge: "12" + # firefox: "4" + # firefox_android: "4" + # safari: "7" + # safari_ios: "7" + - api.TransitionEvent + - api.TransitionEvent.elapsedTime + - api.TransitionEvent.propertyName + + # ⬇️ Same status as overall feature ⬇️ + # baseline: high + # baseline_low_date: 2015-09-30 + # baseline_high_date: 2018-03-30 + # support: + # chrome: "26" + # chrome_android: "26" + # edge: "12" + # firefox: "16" + # firefox_android: "16" + # safari: "9" + # safari_ios: "9" + - css.properties.transition + - css.properties.transition-delay + - css.properties.transition-duration + - css.properties.transition-property + - css.properties.transition-property.all + - css.properties.transition-property.none + - css.properties.transition-timing-function + + # baseline: high + # baseline_low_date: 2016-08-02 + # baseline_high_date: 2019-02-02 + # support: + # chrome: "27" + # chrome_android: "27" + # edge: "14" + # firefox: "23" + # firefox_android: "23" + # safari: "7" + # safari_ios: "7" + - api.TransitionEvent.TransitionEvent + + # baseline: high + # baseline_low_date: 2018-10-02 + # baseline_high_date: 2021-04-02 + # support: + # chrome: "26" + # chrome_android: "26" + # edge: "18" + # firefox: "51" + # firefox_android: "51" + # safari: "7" + # safari_ios: "7" + - api.Element.transitionend_event + + # baseline: high + # baseline_low_date: 2020-01-15 + # baseline_high_date: 2022-07-15 + # support: + # chrome: "27" + # chrome_android: "27" + # edge: "79" + # firefox: "23" + # firefox_android: "23" + # safari: "7" + # safari_ios: "7" + - api.TransitionEvent.pseudoElement + + # baseline: high + # baseline_low_date: 2020-03-24 + # baseline_high_date: 2022-09-24 + # support: + # chrome: "74" + # chrome_android: "74" + # edge: "12" + # firefox: "53" + # firefox_android: "53" + # safari: "13.1" + # safari_ios: "13.4" + - api.Element.transitionrun_event + - api.Element.transitionstart_event + + # 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.CSSTransition + - api.CSSTransition.transitionProperty + + # baseline: high + # baseline_low_date: 2020-11-19 + # baseline_high_date: 2023-05-19 + # support: + # chrome: "87" + # chrome_android: "87" + # edge: "87" + # firefox: "53" + # firefox_android: "53" + # safari: "13.1" + # safari_ios: "13.4" + - api.Element.transitioncancel_event diff --git a/groups/transitions.yml b/groups/transitions.yml new file mode 100644 index 00000000000..521c1f1c183 --- /dev/null +++ b/groups/transitions.yml @@ -0,0 +1,3 @@ +# Features related to transitions of an element's CSS properties +name: Transitions (CSS) +parent: css