@@ -37,6 +37,8 @@ urlPrefix: https://dom.spec.whatwg.org/; type: dfn; spec: dom
37
37
text: event target
38
38
39
39
40
+ spec:cssom-1; type:dfn;
41
+ text:property name; for:CSS declaration
40
42
spec:web-animations-1; type:dfn;
41
43
text:active duration
42
44
text:active phase; for:animation effect
@@ -73,8 +75,8 @@ spec:web-animations-2; type:dfn;
73
75
text:default range
74
76
text:exit range
75
77
spec:scroll-animations-1; type:dfn;
76
- text:animation-range-start
77
- text:animation-range-end
78
+ text:animation-range-start
79
+ text:animation-range-end
78
80
79
81
80
82
Delta specification
@@ -127,12 +129,12 @@ the changes from the programming interface take precedence as follows:
127
129
or after successfully setting the {{Animation/startTime}}
128
130
on a {{CSSAnimation}} ,
129
131
if, as a result of that call the [=play state=] of the
130
- {{CSSAnimation}} changes to or from the [=paused play state=] ,
132
+ {{CSSAnimation}} changes to or from the [=play state/paused=] play state ,
131
133
any subsequent change to the 'animation-play-state' will no longer
132
134
cause the {{CSSAnimation}} to be played or paused
133
135
as defined in [[#animation-play-state]] .
134
136
135
- The requirement for a change to or from the [=paused play state=]
137
+ The requirement for a change to or from the [=play state/paused=] state
136
138
ensures that even after calling
137
139
{{Animation/reverse()}} or setting the {{Animation/startTime}}
138
140
on a running animation,
@@ -265,15 +267,14 @@ roughly the same composite order.
265
267
CSS Animations generated using the markup defined in this specification are
266
268
not added to the global animation list when they are created.
267
269
Instead, these animations are appended to the global animation list at
268
- the first moment when they transition out of the idle play state after
269
- being disassociated from their owning element .
270
+ the first moment when they transition out of the [= play state/idle=] play state
271
+ after being disassociated from their owning element .
270
272
CSS Animations that have been disassociated from their owning element
271
- but are still idle do not have a defined
272
- composite order.
273
+ but are still [=play state/idle=] do not have a defined composite order.
273
274
274
275
Note, this behavior relies on the fact that disassociating an animation
275
276
from its owning element always causes it to enter (or remain) in the
276
-
277
+ [=play state/ idle=] play state.
277
278
278
279
279
280
Assembling Keyframes
@@ -286,7 +287,7 @@ See [[css-animations-1#keyframes]].
286
287
287
288
Processing Keyframes
288
289
289
- For each animation effect defined by the N th item
290
+ For each animation effect defined by the ignore='' >N th item
290
291
in the [=coordinated value list=] of the 'animation-*' properties
291
292
on target (pseudo-)element |element|,
292
293
its associated [=keyframes=] are generated as follows:
@@ -306,7 +307,7 @@ its associated [=keyframes=] are generated as follows:
306
307
|keyframe composite|,
307
308
and |keyframe values|.
308
309
309
- * Let |animated properties| be an empty set of CSS property names.
310
+ * Let |animated properties| be an empty set of CSS [= property names=] .
310
311
311
312
1. Collect Declared Keyframes:
312
313
1. Find the last ''@keyframes'' at-rule in document order
@@ -320,21 +321,21 @@ its associated [=keyframes=] are generated as follows:
320
321
In this case no animation is generated,
321
322
and any existing animation matching |name| is canceled.
322
323
323
- 1. Group together all [= keyframe blocks=]
324
+ 1. Group together all << keyframe-block>> declarations
324
325
that share the same [=specified value|specified=] <>
325
326
(treating ''@keyframe/from'' as ''0%'' and ''@keyframe/to'' as ''100%'' ),
326
327
last declared 'animation-timing-function' [=computed value=]
327
328
(defaulting to |default timing function| if there is no such declaration),
328
329
and last declared 'animation-composition' [=computed value=]
329
330
(defaulting to |default composite| if there is no such declaration).
330
331
331
- 1. For each such group of matching [= keyframe blocks=] ,
332
- ordered by their earliest [= keyframe block=] in the sorted order:
332
+ 1. For each such group of matching << keyframe-block>> declarations ,
333
+ ordered by their earliest << keyframe- block>> in the sorted order:
333
334
334
335
1. [=Cascade=] together all of its [=declaration blocks=]
335
336
such that for each CSS property
336
337
(except those that are “not animatable”, which must be ignored)
337
- the last declaration among all its [= keyframe blocks=]
338
+ the last declaration among all its << keyframe-block>> declarations
338
339
takes precedence.
339
340
[[CSS-CASCADE-4]]
340
341
@@ -343,14 +344,14 @@ its associated [=keyframes=] are generated as follows:
343
344
and map together corresponding property pairs in each [=logical property group=]
344
345
according to the |element|’s [=computed value|computed=] [=writing mode=] .
345
346
346
- 1. Append to |keyframes| a new empty [=keyframe=] |keyframe|
347
+ 1. Append to |keyframes| a new empty [=keyframe=]
347
348
with the group’s |keyframe offset|,
348
349
|keyframe timing function|,
349
350
and |keyframe composite|.
350
351
Give its |keyframe values|
351
352
the set of [=declared values=] resulting from this cascade.
352
353
353
- 1. Add each property name that was added to its |keyframe properties|
354
+ 1. Add each [= property name=] that was added to its {{CSSKeyframesRule/cssRules}}
354
355
to |animated properties|.
355
356
356
357
1. Generate Initial and Final Frames:
@@ -470,11 +471,11 @@ Declaring Animations
470
471
If the [=used value|used=] 'animation-duration' is ''0s'' ,
471
472
the animation itself still occurs (instantaneously).
472
473
The animation’s start and end events are still fired.
473
- If 'animation-fill-mode' is set to '' backwards'' or '' both'',
474
+ If 'animation-fill-mode' is set to ''single-animation-fill-mode/ backwards'' or ''single-animation-fill-mode/ both'' ,
474
475
the first frame of the animation
475
476
(as defined by 'animation-direction' )
476
477
will be displayed during the 'animation-delay' ;
477
- and if 'animation-fill-mode' is set to '' forwards'' or '' both'',
478
+ and if 'animation-fill-mode' is set to ''single-animation-fill-mode/ forwards'' or ''single-animation-fill-mode/ both'' ,
478
479
the last frame of the animation
479
480
(as defined by 'animation-direction' )
480
481
will be displayed after the 'animation-delay' .
@@ -746,25 +747,25 @@ The values of 'animation-trigger-behavior' have the following meaning
746
747
for an [=animation trigger=] that enters its [=animation trigger/active interval|active interval=] :
747
748
748
749
749
- once
750
-
751
- The animation is triggered and played once and only once.
752
-
753
- repeat
754
-
755
- The animation is played from the beginning each time it is triggered.
756
- When the trigger’s [=animation trigger/active interval=] is exited the animation is reset.
757
-
758
- alternate
759
-
760
- The animation is played forwards, according to its [=playback direction=], each time it is triggered.
761
- When the trigger’s [=animation trigger/active interval=] is exited the animation is reversed.
762
-
763
- state
764
-
765
- The animation is triggered and played once.
766
- When the trigger’s [=animation trigger/active interval=] is exited the animation is paused.
767
- When the trigger’s [=animation trigger/active interval=] is re-entered the animation is resumed.
750
+ once
751
+
752
+ The animation is triggered and played once and only once.
753
+
754
+ repeat
755
+
756
+ The animation is played from the beginning each time it is triggered.
757
+ When the trigger’s [=animation trigger/active interval=] is exited the animation is reset.
758
+
759
+ alternate
760
+
761
+ The animation is played forwards, according to its [=playback direction=] , each time it is triggered.
762
+ When the trigger’s [=animation trigger/active interval=] is exited the animation is reversed.
763
+
764
+ state
765
+
766
+ The animation is triggered and played once.
767
+ When the trigger’s [=animation trigger/active interval=] is exited the animation is paused.
768
+ When the trigger’s [=animation trigger/active interval=] is re-entered the animation is resumed.
768
769
769
770
770
771
The behavior of each value is defined in [[web-animations-2#trigger-behaviors]] .
@@ -858,7 +859,7 @@ The 'animation-trigger-exit-range' property is a [=shorthand property|shorthand=
858
859
that sets 'animation-trigger-exit-range-start' and 'animation-trigger-exit-range-end'
859
860
together in a single declaration,
860
861
specifying the [=animation trigger=] ’s associated [=exit range=] .
861
- It has the same syntax as the 'animation-range' property, with the addition of the '' auto'' keyword.
862
+ It has the same syntax as the 'animation-range' property, with the addition of the ''animation-trigger-exit-range-start/ auto'' keyword.
862
863
863
864
The [=exit range=] replaces the [=default range=] once the [=animation trigger=] ’s
864
865
[=animation trigger/active interval|active interval=] is entered,
@@ -888,31 +889,31 @@ associated [=exit range=].
888
889
The values of 'animation-trigger-exit-range-start' have the following meaning:
889
890
890
891
891
- auto
892
-
893
- The start of the trigger’s [=exit range=]
894
- is equal to the start of its [=default range=].
895
-
896
- normal
897
-
898
- The start of the trigger’s [=exit range=]
899
- is the start of its associated [=timeline=];
900
- the start of the trigger’s [=animation trigger/active interval|active interval=]
901
- is determined as normal.
902
-
903
- <>
904
-
905
- The [=exit range=] starts
906
- at the specified point on the [=timeline=]
907
- measuring from the start of the timeline.
908
-
909
- <> <>?
910
-
911
- The [=exit range=] starts
912
- at the specified point on the [=timeline=]
913
- measuring from the start of the specified [=named timeline range=].
914
- If the <> is omitted,
915
- it defaults to 0%.
892
+ auto
893
+
894
+ The start of the trigger’s [=exit range=]
895
+ is equal to the start of its [=default range=] .
896
+
897
+ normal
898
+
899
+ The start of the trigger’s [=exit range=]
900
+ is the start of its associated [=timeline=] ;
901
+ the start of the trigger’s [=animation trigger/active interval|active interval=]
902
+ is determined as normal.
903
+
904
+ <>
905
+
906
+ The [=exit range=] starts
907
+ at the specified point on the [=timeline=]
908
+ measuring from the start of the timeline.
909
+
910
+ <> <>?
911
+
912
+ The [=exit range=] starts
913
+ at the specified point on the [=timeline=]
914
+ measuring from the start of the specified [=named timeline range=] .
915
+ If the <> is omitted,
916
+ it defaults to 0%.
916
917
917
918
918
919
## The 'animation-trigger-exit-range-end' property ## {#animation-trigger-exit-range-end}
@@ -934,31 +935,31 @@ associated [=exit range=].
934
935
The values of 'animation-trigger-exit-range-start' have the following meaning:
935
936
936
937
937
- auto
938
-
939
- The end of the trigger’s [=exit range=]
940
- is equal to the end of its [=default range=].
941
-
942
- normal
943
-
944
- The end of the trigger’s [=exit range=]
945
- is the end of its associated [=timeline=];
946
- the end of the trigger’s [=animation trigger/active interval|active interval=]
947
- is determined as normal.
948
-
949
- <>
950
-
951
- The [=exit range=] ends
952
- at the specified point on the [=timeline=]
953
- measuring from the start of the timeline.
954
-
955
- <> <>?
956
-
957
- The [=exit range=] ends
958
- at the specified point on the [=timeline=]
959
- measuring from the start of the specified [=named timeline range=].
960
- If the <> is omitted,
961
- it defaults to 100%.
938
+ auto
939
+
940
+ The end of the trigger’s [=exit range=]
941
+ is equal to the end of its [=default range=] .
942
+
943
+ normal
944
+
945
+ The end of the trigger’s [=exit range=]
946
+ is the end of its associated [=timeline=] ;
947
+ the end of the trigger’s [=animation trigger/active interval|active interval=]
948
+ is determined as normal.
949
+
950
+ <>
951
+
952
+ The [=exit range=] ends
953
+ at the specified point on the [=timeline=]
954
+ measuring from the start of the timeline.
955
+
956
+ <> <>?
957
+
958
+ The [=exit range=] ends
959
+ at the specified point on the [=timeline=]
960
+ measuring from the start of the specified [=named timeline range=] .
961
+ If the <> is omitted,
962
+ it defaults to 100%.
962
963
963
964
964
965
## The 'animation-trigger' property ## {#animation-trigger}
0 commit comments