diff --git a/css-transitions-2/Overview.bs b/css-transitions-2/Overview.bs index 9908b84e6d8..25e378e311e 100644 --- a/css-transitions-2/Overview.bs +++ b/css-transitions-2/Overview.bs @@ -167,6 +167,78 @@ Each time a new transition is generated, the current value of the (already incremented) current transition generation is stored as the transition's transition generation. +## Defining [=before-change style=]: the ''@starting-style'' rule + +Transitions can only start during a [=style change event=] for elements which +has a defined [=before-change style=] established by the previous +[=style change event=], which means that newly inserted elements or elements +that change from not [=being rendered=] to being rendered do not start +transitions. Still, doing transitions starting from the initial rendering is a +valid use case. + +The @starting-style rule is a +conditional group rule with the implicit condition that it matches if the +previous [=style change event=] did not establish a [=before-change style=] for +the element whose styles are being computed. This is used to establish a +[=before-change style=] for the current [=style change event=]. + +If any rules in ''@starting-style'' are applied, the resulting style must be +used as the [=before-change style=] for the current [=style change event=] and +the computed styles must be re-computed without ''@starting-style'' rules +applied. + +
+ + Transitioning background-color of an h1 element from transparent to green + from initial rendering: + +
+  h1 {
+    transition: background-color 1.5s;
+    background-color: green;
+  }
+  @starting-style {
+    h1 {
+      background-color: transparent;
+    }
+  }
+  
+ + Conditional rules can be used with CSS Nesting: + +
+  h1 {
+    transition: background-color 1.5s;
+    background-color: green;
+    @starting-style {
+      background-color: transparent;
+    }
+  }
+  
+
+ +Global, name-defining at-rules such as ''@keyframes'', ''@font-face'', and +''@layer'' are not constrained by ''@starting-style''. + +### The CSSStartingStyleRule interface + +The {{CSSStartingStyleRule}} interface represents a ''@starting-style'' rule. + +
+[Exposed=Window]
+interface CSSStartingStyleRule : CSSConditionRule {
+};
+
+ +
+
conditionText of type CSSOMString + (CSSStartingStyle-specific definition for attribute on CSSConditionRule) +
The conditionText attribute (defined on the + CSSConditionRule parent rule), on getting, must return the + empty string. +
+ + # Application of transitions # {#application} ## Animation composite order ## {#animation-composite-order}