[css-transitions-2] Add spec for @starting-style #8174

css-transitions-2/Overview.bs

@@ -167,6 +167,108 @@ Each time a new transition is generated, the current value of the (already
 incremented) <a>current transition generation</a> is stored as the
 transition's <dfn>transition generation</dfn>.
 
+## Defining [=before-change style=]: the ''@starting-style'' rule
+
+In Level 1 of this specification, transitions can only start during a
+[=style change event=] for elements which have a defined [=before-change style=]
+established by the previous [=style change event=]. That means a transition
+could not be started on an element that was not being rendered for the previous
+[=style change event=] (see: [[css-transitions-1#starting]]).
+
+In some cases it makes sense to start transitions on newly inserted elements or
+elements that change from not [=being rendered=] to being rendered. To allow
+for that, this specification introduces ''@starting-style''.
+
+The <dfn at-rule id="at-ruledef-starting-style">@starting-style</dfn> rule is a
+grouping rule where the rules inside it apply 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=].
+
+Note that this means that ''@starting-style'' rules only applies to some
+elements during a computed style update, namely elements that were not rendered
+or part of the DOM during the previous [=style change event=].
+
+If any style rules in ''@starting-style'' are applied, the resulting style must
+be used as the [=before-change style=] for the current [=style change event=].
+Style rules in ''@starting-style'' do not apply directly to
+[=after-change style=].
+
+<div class="note">
+Since ''@starting-style'' is applied to create a [=before-change style=] during
+the same [=style change event=] as it is being used for triggering
+transitions, it inherits from the parent element's [=after-change style=], even
+if the parent establishes a [=before-change style=] through
+''@starting-style''.
+</div>
+
+<div class=example>
+
+  Transitioning background-color of an h1 element from transparent to green
+	from initial rendering:
+
+	<pre class=lang-css>
+	h1 {
+		transition: background-color 1.5s;
+		background-color: green;
+	}
+	@starting-style {
+		h1 {
+			background-color: transparent;
+		}
+	}
+	</pre>
+
+	Conditional rules can be used with CSS Nesting:
+
+	<pre class=lang-css>
+	h1 {
+		transition: background-color 1.5s;
+		background-color: green;
+		@starting-style {
+			background-color: transparent;
+		}
+	}
+	</pre>
+</div>
+
+<div class=example>
+
+	Transitioning an element with opacity in and out of display:none:
+
+	<pre class=lang-css>
+	#target {
+		transition-property: opacity, display;
+		transition-duration: 0.5s;
+		display: block;
+		opacity: 1;
+		@starting-style {
+			display: none;
+			opacity: 0;
+		}
+	}
+	#target.hidden {
+		display: none;
+		opacity: 0;
+	}
+	</pre>
+</div>
+
+Global, name-defining at-rules such as ''@keyframes'', ''@font-face'', and
+''@layer'' are allowed inside ''@starting-style'', and when present behave as
+if they were outside of ''@starting-style''.
+
+### The <code>CSSStartingStyleRule</code> interface
+
+The {{CSSStartingStyleRule}} interface represents a ''@starting-style'' rule.
+
+<pre class='idl'>
+[Exposed=Window]
+interface CSSStartingStyleRule : CSSGroupingRule {
+};
+</pre>
+
+
 # Application of transitions # {#application}
 
 ## Animation composite order ## {#animation-composite-order}