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. + +
+ 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; + } + } ++
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)
+ conditionText
attribute (defined on the
+ CSSConditionRule
parent rule), on getting, must return the
+ empty string.
+