Skip to content

Commit 75cecb9

Browse files
dbarondbaron
committed
[css-transitions-2] Convert a few sections from tabs to spaces, to fix warnings.
1 parent a962483 commit 75cecb9

File tree

1 file changed

+105
-105
lines changed

1 file changed

+105
-105
lines changed

‎css-transitions-2/Overview.bs‎

Lines changed: 105 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,10 @@ spec:web-animations-1; type:dfn;
6262

6363
<h2 id="delta">Delta specification</h2>
6464

65-
<p>This is a delta specification, meaning that it currently contains
66-
only the differences from CSS Transitions Level 1 [[!CSS3-TRANSITIONS]].
67-
Once the Level 1 specification is closer to complete, it will be merged
68-
with the additions here into a complete level 2 specification.</p>
65+
<p>This is a delta specification, meaning that it currently contains
66+
only the differences from CSS Transitions Level 1 [[!CSS3-TRANSITIONS]].
67+
Once the Level 1 specification is closer to complete, it will be merged
68+
with the additions here into a complete level 2 specification.</p>
6969

7070

7171
# Transitions # {#transitions}
@@ -241,66 +241,66 @@ because they lack a [=before-change style=].
241241

242242
<div class=example>
243243

244-
The 'background-color' of an <code>h1</code> element can be transitioned
245-
from transparent to green when it is initially rendered:
246-
247-
<pre class=lang-css>
248-
h1 {
249-
transition: background-color 1.5s;
250-
background-color: green;
251-
}
252-
@starting-style {
253-
h1 {
254-
background-color: transparent;
255-
}
256-
}
257-
</pre>
258-
259-
Conditional rules can be used with CSS Nesting:
260-
261-
<pre class=lang-css>
262-
h1 {
263-
transition: background-color 1.5s;
264-
background-color: green;
265-
@starting-style {
266-
background-color: transparent;
267-
}
268-
}
269-
</pre>
244+
The 'background-color' of an <code>h1</code> element can be transitioned
245+
from transparent to green when it is initially rendered:
246+
247+
<pre class=lang-css>
248+
h1 {
249+
transition: background-color 1.5s;
250+
background-color: green;
251+
}
252+
@starting-style {
253+
h1 {
254+
background-color: transparent;
255+
}
256+
}
257+
</pre>
258+
259+
Conditional rules can be used with CSS Nesting:
260+
261+
<pre class=lang-css>
262+
h1 {
263+
transition: background-color 1.5s;
264+
background-color: green;
265+
@starting-style {
266+
background-color: transparent;
267+
}
268+
}
269+
</pre>
270270
</div>
271271

272272
<div class=example>
273-
The 'opacity' of an element can be transitioned when the element changes
274-
to or from ''display: none'':
275-
276-
<pre class=lang-css>
277-
#target {
278-
transition-property: opacity, display;
279-
transition-duration: 0.5s;
280-
display: block;
281-
opacity: 1;
282-
@starting-style {
283-
opacity: 0;
284-
}
285-
}
286-
#target.hidden {
287-
display: none;
288-
opacity: 0;
289-
}
290-
</pre>
291-
292-
The display is transitioning to allow for an opacity transition before
293-
flipping from ''display:block'' to ''display:none''.
294-
295-
Specifying ''opacity: 0'' in the ''@starting-style'' rule means the
296-
element will transition opacity from ''0'' to ''1'' when inserted into
297-
the tree or when the <code>hidden</code> class flips 'display' from
298-
''display/none'' to ''display/block'' as the target element does not
299-
already have a [=before-change style=] in those cases.
300-
301-
Specifying ''opacity: 0'' in the <code>#target.hidden</code> rule makes
302-
'opacity' transition from ''1'' to ''0'' when the <code>hidden</code>
303-
class is added.
273+
The 'opacity' of an element can be transitioned when the element changes
274+
to or from ''display: none'':
275+
276+
<pre class=lang-css>
277+
#target {
278+
transition-property: opacity, display;
279+
transition-duration: 0.5s;
280+
display: block;
281+
opacity: 1;
282+
@starting-style {
283+
opacity: 0;
284+
}
285+
}
286+
#target.hidden {
287+
display: none;
288+
opacity: 0;
289+
}
290+
</pre>
291+
292+
The display is transitioning to allow for an opacity transition before
293+
flipping from ''display:block'' to ''display:none''.
294+
295+
Specifying ''opacity: 0'' in the ''@starting-style'' rule means the
296+
element will transition opacity from ''0'' to ''1'' when inserted into
297+
the tree or when the <code>hidden</code> class flips 'display' from
298+
''display/none'' to ''display/block'' as the target element does not
299+
already have a [=before-change style=] in those cases.
300+
301+
Specifying ''opacity: 0'' in the <code>#target.hidden</code> rule makes
302+
'opacity' transition from ''1'' to ''0'' when the <code>hidden</code>
303+
class is added.
304304
</div>
305305

306306
Global, name-defining at-rules such as ''@keyframes'', ''@font-face'', and
@@ -677,50 +677,50 @@ elem.getAnimations()[0].transitionProperty // 'opacity'
677677

678678
<h2 id="issues-common">Issues commonly raised as issues with previous levels</h2>
679679

680-
<p>
681-
These issues were commonly reported issues
682-
with the previous level of the specification.
683-
</p>
684-
685-
<div class="issue">
686-
<p>
687-
More powerful timing function syntax
688-
is a common request from developers.
689-
See, for example:
690-
<a href="https://lists.w3.org/Archives/Public/www-style/2013Jun/0376.html">2013 message</a>
691-
or
692-
<a href="https://lists.w3.org/Archives/Public/public-fx/2015JulSep/thread.html#msg34">2015 thread</a>.
693-
</p>
694-
</div>
695-
696-
<div class="issue">
697-
<p>
698-
Developers frequently have to trigger style flushes
699-
in order to force transitions to start.
700-
It would be good to have an API
701-
that would avoid this requirement.
702-
See, for example,
703-
<a href="https://lists.w3.org/Archives/Public/www-style/2011Mar/0729.html">2011 proposal</a>.
704-
</p>
705-
</div>
680+
<p>
681+
These issues were commonly reported issues
682+
with the previous level of the specification.
683+
</p>
684+
685+
<div class="issue">
686+
<p>
687+
More powerful timing function syntax
688+
is a common request from developers.
689+
See, for example:
690+
<a href="https://lists.w3.org/Archives/Public/www-style/2013Jun/0376.html">2013 message</a>
691+
or
692+
<a href="https://lists.w3.org/Archives/Public/public-fx/2015JulSep/thread.html#msg34">2015 thread</a>.
693+
</p>
694+
</div>
695+
696+
<div class="issue">
697+
<p>
698+
Developers frequently have to trigger style flushes
699+
in order to force transitions to start.
700+
It would be good to have an API
701+
that would avoid this requirement.
702+
See, for example,
703+
<a href="https://lists.w3.org/Archives/Public/www-style/2011Mar/0729.html">2011 proposal</a>.
704+
</p>
705+
</div>
706706

707707
<h2 id="issues-spec">Issues deferred from previous levels of the spec</h2>
708708

709-
<p>
710-
These issues were in previous levels of the specification,
711-
but may not turn out to be important in this level either.
712-
</p>
713-
714-
<div class="issue">
715-
We may ultimately want to support a keypath syntax
716-
for the 'transition-property' property.
717-
A keypath syntax
718-
would enable different transitions
719-
to be specified
720-
for components of a property.
721-
For example
722-
the blur of a shadow
723-
could have
724-
a different transition
725-
than the color of a shadow.
726-
</div>
709+
<p>
710+
These issues were in previous levels of the specification,
711+
but may not turn out to be important in this level either.
712+
</p>
713+
714+
<div class="issue">
715+
We may ultimately want to support a keypath syntax
716+
for the 'transition-property' property.
717+
A keypath syntax
718+
would enable different transitions
719+
to be specified
720+
for components of a property.
721+
For example
722+
the blur of a shadow
723+
could have
724+
a different transition
725+
than the color of a shadow.
726+
</div>

0 commit comments

Comments
 (0)