1
- <style type="text/css">
2
- div.prod { margin: 1em 2em; }
3
-
4
- table.event-handlers {
5
- border-collapse: collapse;
6
- }
7
- table.event-handlers th,
8
- table.event-handlers td {
9
- padding: 0.2em 1em;
10
- }
11
- table.event-handlers td {
12
- border: 1px solid black;
13
- }
14
- </style>
15
-
16
-
17
1
<pre class="metadata">
18
2
Title : CSS Transitions Level 1
19
3
Status : ED
@@ -38,8 +22,22 @@ Status Text: <strong>This document</strong> is expected to be relatively close t
38
22
Ignored Vars : x1, x2, y1, y2
39
23
Link Defaults : css-transforms (property) transform
40
24
</pre>
25
+ <style type="text/css">
26
+ div.prod { margin: 1em 2em; }
27
+
28
+ table.event-handlers {
29
+ border-collapse: collapse;
30
+ }
31
+ table.event-handlers th,
32
+ table.event-handlers td {
33
+ padding: 0.2em 1em;
34
+ }
35
+ table.event-handlers td {
36
+ border: 1px solid black;
37
+ }
38
+ </style>
41
39
<pre class="link-defaults">
42
- spec:css22 ; type:property;
40
+ spec:css2 ; type:property;
43
41
text:top
44
42
text:right
45
43
text:bottom
@@ -84,6 +82,7 @@ spec:css22; type:property;
84
82
spec:css-backgrounds-3; type:property;
85
83
text:background-image
86
84
text:background-origin
85
+ text:box-shadow
87
86
spec:css-color-4;
88
87
type:property;
89
88
text:color
@@ -137,8 +136,8 @@ Value Definitions {#values}
137
136
also accept the <a>CSS-wide keywords</a> as their property value.
138
137
For readability they have not been repeated explicitly.
139
138
140
- <span id="transitions-"> Transitions </span> {# transitions}
141
- =========================================================
139
+ <h2 id="transitions" oldids=" transitions-" dfn export>
140
+ Transitions</h2>
142
141
143
142
<p>
144
143
Normally when the value of a CSS property changes, the rendered result is instantly updated, with the affected elements immediately changing from the old property value to the new property value. This section describes a way to specify gradual transitions using new CSS properties. These properties are used to animate smoothly from the old state to the new state over time.
@@ -423,7 +422,7 @@ Starting of transitions {#starting}
423
422
<dfn export for="transition">reversing-adjusted start value</dfn> , and <dfn export for="transition">reversing shortening factor</dfn> .
424
423
Transitions are added to this set as described in this section,
425
424
and are removed from this set
426
- when they <a>complete</a>
425
+ when they [=transition/complete=]
427
426
or when implementations are required to <dfn export for="transition">cancel</dfn> them.
428
427
<span class="note">
429
428
For the rationale behind the <a>reversing-adjusted start value</a>
@@ -446,7 +445,7 @@ Starting of transitions {#starting}
446
445
447
446
<p>
448
447
If an element is no longer in the document,
449
- implementations must <a>cancel</a> any <a>running transitions</a>
448
+ implementations must [=transition/cancel=] any <a>running transitions</a>
450
449
on it and remove transitions on it from the
451
450
<a>completed transitions</a> .
452
451
</p>
@@ -670,13 +669,13 @@ Starting of transitions {#starting}
670
669
start a transition whose:
671
670
<ul>
672
671
<li>
673
- <a> start time</a> is
672
+ [=transition/ start time=] is
674
673
the time of the <a>style change event</a> plus
675
674
the <a>matching transition delay</a> ,
676
675
</li>
677
676
<li>
678
- <a> end time</a> is
679
- the <a> start time</a> plus
677
+ [=transition/ end time=] is
678
+ the [=transition/ start time=] plus
680
679
the <a>matching transition duration</a> ,
681
680
</li>
682
681
<li>
@@ -712,7 +711,7 @@ Starting of transitions {#starting}
712
711
and there is <strong> not</strong>
713
712
a <a>matching transition-property value</a> ,
714
713
then implementations must
715
- <a>cancel</a> the <a>running transition</a>
714
+ [=transition/cancel=] the <a>running transition</a>
716
715
or remove the <a>completed transition</a> from the set of
717
716
<a>completed transitions</a> .
718
717
</li>
@@ -730,7 +729,7 @@ Starting of transitions {#starting}
730
729
the value of the property in the <a>after-change style</a> ,
731
730
or if these two values are not [=transitionable=] ,
732
731
then implementations must
733
- <a>cancel</a> the <a>running transition</a> .
732
+ [=transition/cancel=] the <a>running transition</a> .
734
733
</li>
735
734
<li>
736
735
Otherwise, if the <a>combined duration</a> is
@@ -740,7 +739,7 @@ Starting of transitions {#starting}
740
739
is not [=transitionable=] with
741
740
the value of the property in the <a>after-change style</a> ,
742
741
then implementations must
743
- <a>cancel</a> the <a>running transition</a> .
742
+ [=transition/cancel=] the <a>running transition</a> .
744
743
</li>
745
744
<li>
746
745
Otherwise, if the <a>reversing-adjusted start value</a>
@@ -750,7 +749,7 @@ Starting of transitions {#starting}
750
749
<a href="#reversing">section on reversing of
751
750
transitions</a> for why these case exists)</span> ,
752
751
implementations must
753
- <a>cancel</a> the <a>running transition</a> and
752
+ [=transition/cancel=] the <a>running transition</a> and
754
753
start a new transition whose:
755
754
<ul>
756
755
<li>
@@ -782,7 +781,7 @@ Starting of transitions {#starting}
782
781
have y1 or y2 outside the range [0, 1] .</span>
783
782
</li>
784
783
<li>
785
- <a> start time</a> is
784
+ [=transition/ start time=] is
786
785
the time of the <a>style change event</a> plus:
787
786
<ol>
788
787
<li> if the <a>matching transition delay</a>
@@ -797,8 +796,8 @@ Starting of transitions {#starting}
797
796
</ol>
798
797
</li>
799
798
<li>
800
- <a> end time</a> is
801
- the <a> start time</a> plus the product of
799
+ [=transition/ end time=] is
800
+ the [=transition/ start time=] plus the product of
802
801
the <a>matching transition duration</a> and
803
802
the new transition's <a>reversing shortening factor</a> ,
804
803
</li>
@@ -816,17 +815,17 @@ Starting of transitions {#starting}
816
815
</li>
817
816
<li>
818
817
Otherwise, implementations must
819
- <a>cancel</a> the <a>running transition</a>
818
+ [=transition/cancel=] the <a>running transition</a>
820
819
and start a new transition whose:
821
820
<ul>
822
821
<li>
823
- <a> start time</a> is
822
+ [=transition/ start time=] is
824
823
the time of the <a>style change event</a> plus
825
824
the <a>matching transition delay</a> ,
826
825
</li>
827
826
<li>
828
- <a> end time</a> is
829
- the <a> start time</a> plus
827
+ [=transition/ end time=] is
828
+ the [=transition/ start time=] plus
830
829
the <a>matching transition duration</a> ,
831
830
</li>
832
831
<li>
@@ -987,7 +986,7 @@ Application of transitions {#application}
987
986
<p>
988
987
When a property on an element is undergoing a transition
989
988
(that is, when or after the transition has started and before the
990
- <a> end time</a> of the transition)
989
+ [=transition/ end time=] of the transition)
991
990
the transition adds a style called the <dfn export>current value</dfn>
992
991
to the CSS cascade
993
992
at the level defined for CSS Transitions in [[!CSS3CASCADE]] .
@@ -1022,15 +1021,15 @@ Application of transitions {#application}
1022
1021
1023
1022
<p>
1024
1023
If the current time is at or before the
1025
- <a> start time</a> of the transition
1024
+ [=transition/ start time=] of the transition
1026
1025
(that is, during the delay phase of the transition),
1027
1026
the <a>current value</a> is a specified style that will compute
1028
1027
to the <a>start value</a> of the transition.
1029
1028
</p>
1030
1029
1031
1030
<p>
1032
1031
If the current time is after the
1033
- <a> start time</a> of the transition
1032
+ [=transition/ start time=] of the transition
1034
1033
(that is, during the duration phase of the transition),
1035
1034
the <a>current value</a> is a specified style that will compute
1036
1035
to the result of [=interpolating=] the property
@@ -1057,7 +1056,7 @@ Completion of transitions {#complete}
1057
1056
<dfn export for="transition" id="dfn-complete">complete</dfn>
1058
1057
at a time that is equal to or after their end time,
1059
1058
but prior to the first <a>style change event</a>
1060
- whose time is equal to or after their <a> end time</a> .
1059
+ whose time is equal to or after their [=transition/ end time=] .
1061
1060
When a transition completes,
1062
1061
implementations must move
1063
1062
all transitions that complete at that time
@@ -1188,8 +1187,7 @@ The different types of transition events that can occur are:
1188
1187
1189
1188
<dt> <dfn id=transitioncancel>transitioncancel</dfn> </dt>
1190
1189
<dd>
1191
- The {{transitioncancel}} event occurs when a transition is <a
1192
- lt="cancel"> canceled</a> .
1190
+ The {{transitioncancel}} event occurs when a transition is [=transition/canceled=] .
1193
1191
1194
1192
The {{TransitionEvent/elapsedTime}} for {{transitioncancel}} events is
1195
1193
the number of seconds from the end of the transition's delay to the
0 commit comments