2
2
3
3
<pre class='metadata'>
4
4
Status : ED
5
+ Work Status : Refining
5
6
Shortname : css-animations
6
7
Level : 1
7
8
Group : csswg
@@ -90,29 +91,29 @@ Animations</h2>
90
91
91
92
While running, the animation computes the value of those properties
92
93
it animates. Other values may take precedence over the animated value
93
- according to the CSS cascade ([[!CSS3CASCADE]] ).
94
+ according to the CSS cascade ([[!CSS3CASCADE]] ).
94
95
95
96
The start time of an animation is the time at which the style applying
96
97
the animation and the corresponding @keyframes rule are both resolved.
97
98
If an animation is specified for an element but the corresponding
98
- @keyframes rule does not yet exist, the animation cannot start; the
99
- animation will start from the beginning as soon as a matching @keyframes
100
- rule can be resolved. An animation specified by dynamically modifying the
101
- element's style will start when this style is resolved; that may be
102
- immediately in the case of a pseudo style rule such as hover, or may be
103
- when the scripting engine returns control to the browser (in the case of
104
- style applied by script). Note that dynamically updating keyframe style
99
+ @keyframes rule does not yet exist, the animation cannot start; the
100
+ animation will start from the beginning as soon as a matching @keyframes
101
+ rule can be resolved. An animation specified by dynamically modifying the
102
+ element's style will start when this style is resolved; that may be
103
+ immediately in the case of a pseudo style rule such as hover, or may be
104
+ when the scripting engine returns control to the browser (in the case of
105
+ style applied by script). Note that dynamically updating keyframe style
105
106
rules does not start or restart an animation.
106
-
107
+
107
108
108
109
An animation applies to an element if its name appears as one of the
109
110
identifiers in the computed value of the 'animation-name' property and the
110
111
animation uses a valid @keyframes rule. Once an
111
112
animation has started it continues until it ends or the 'animation-name' is
112
113
removed. Changing the values of animation properties while the animation
113
- is running has no effect on the amount of time that has elapsed since the
114
- animation started running i.e. once the animation is running, updates to
115
- 'animation-delay' have no effect. The remainder of the animation runs
114
+ is running has no effect on the amount of time that has elapsed since the
115
+ animation started running i.e. once the animation is running, updates to
116
+ 'animation-delay' have no effect. The remainder of the animation runs
116
117
according to the new animation property values.
117
118
118
119
Note also that changing the value
@@ -200,7 +201,7 @@ Keyframes</h2>
200
201
declarations qualified with !important are ignored.
201
202
202
203
The @keyframes rule that is used by an animation will be the last one encountered in sorted rules
203
- order that matches the name of the animation specified by the 'animation-name' property.
204
+ order that matches the name of the animation specified by the 'animation-name' property.
204
205
205
206
<div class='example'>
206
207
<pre>
@@ -253,7 +254,7 @@ Keyframes</h2>
253
254
254
255
To determine the set of keyframes, all of the values in the selectors are sorted in increasing order
255
256
by time. The rules within the @keyframes rule then cascade; the properties of a keyframe may thus derive
256
- from more than one @keyframes rule with the same selector value.
257
+ from more than one @keyframes rule with the same selector value.
257
258
258
259
If a property is not specified for a keyframe, or is specified but invalid, the animation of that
259
260
property proceeds as if that keyframe did not exist. Conceptually, it is as if a set of keyframes is
@@ -414,7 +415,7 @@ The 'animation-name' property</h3>
414
415
The animation will use the keyframes with the name specified by the <<custom-ident>> ,
415
416
if they exist.If no such keyframes exist, there is no animation.
416
417
417
- The <a href="http://www.w3.org/TR/css3-values/#common-keywords">CSS-wide keywords</a>
418
+ The <a href="http://www.w3.org/TR/css3-values/#common-keywords">CSS-wide keywords</a>
418
419
and keywords defined by this property are not valid animation names.
419
420
</dl>
420
421
@@ -445,15 +446,15 @@ The 'animation-duration' property</h3>
445
446
If the <<time>> is ''0s'' , like the initial value,
446
447
the keyframes of the animation have no effect,
447
448
but the animation itself still occurs instantaneously.
448
- Specifically, start and end events are fired; if
449
- 'animation-fill-mode' is set to ''backwards'' or
450
- ''both'' , the first frame of the animation, as defined by
451
- 'animation-direction' , will be displayed during the
452
- 'animation-delay' . Then the last frame of the animation,
453
- as defined by 'animation-direction' , will be displayed if
454
- 'animation-fill-mode' is set to ''forwards'' or ''both'' .
455
- If 'animation-fill-mode' is set to ''animation-fill-mode/none''
456
- then the animation has no visible effect.
449
+ Specifically, start and end events are fired; if
450
+ 'animation-fill-mode' is set to ''backwards'' or
451
+ ''both'' , the first frame of the animation, as defined by
452
+ 'animation-direction' , will be displayed during the
453
+ 'animation-delay' . Then the last frame of the animation,
454
+ as defined by 'animation-direction' , will be displayed if
455
+ 'animation-fill-mode' is set to ''forwards'' or ''both'' .
456
+ If 'animation-fill-mode' is set to ''animation-fill-mode/none''
457
+ then the animation has no visible effect.
457
458
</dl>
458
459
459
460
<h3 id="animation-timing-function">
@@ -487,10 +488,10 @@ The 'animation-timing-function' property</h3>
487
488
ease in at the start of its second iteration,
488
489
and ease out again as it approaches the end of the animation.
489
490
490
- When specified in a keyframe, 'animation-timing-function' defines the progression of the
491
+ When specified in a keyframe, 'animation-timing-function' defines the progression of the
491
492
animation between the current keyframe and the next keyframe that defines 'animation-timing-function'
492
- in sorted keyframe selector order (or the end of the animation if no other keyframe specifies
493
- 'animation-timing function' ). The specified timing function will apply over this interval independently
493
+ in sorted keyframe selector order (or the end of the animation if no other keyframe specifies
494
+ 'animation-timing function' ). The specified timing function will apply over this interval independently
494
495
of the animation's current direction.
495
496
496
497
<h3 id="animation-iteration-count">
@@ -502,9 +503,9 @@ The 'animation-iteration-count' property</h3>
502
503
'animation-direction' value of ''alternate'' , which will cause the animation to play in
503
504
reverse on alternate cycles.
504
505
505
- The time window during which the animation is active
506
+ The time window during which the animation is active
506
507
(<code> duration</code> x <code> iteration-count</code> )
507
- is known as the <dfn>active duration</dfn> .
508
+ is known as the <dfn>active duration</dfn> .
508
509
509
510
<pre class='propdef'>
510
511
Name : animation-iteration-count
@@ -524,17 +525,17 @@ The 'animation-iteration-count' property</h3>
524
525
<dl dfn-type=value dfn-for=animation-iteration-count>
525
526
<dt> <dfn>infinite</dfn>
526
527
<dd>
527
- The animation will repeat forever.
528
+ The animation will repeat forever.
528
529
529
530
<dt> <dfn><<number>></dfn>
530
531
<dd>
531
532
<p> The animation will repeat the specified number of times.
532
533
If the number is not an integer,
533
534
the animation will end partway through its last cycle.
534
- Negative numbers are invalid.
535
+ Negative numbers are invalid.
535
536
536
- <p> A value of ''0'' is valid and, similar to an 'animation-duration'
537
- of ''0s'' , causes the animation to occur instantaneously.
537
+ <p> A value of ''0'' is valid and, similar to an 'animation-duration'
538
+ of ''0s'' , causes the animation to occur instantaneously.
538
539
</dl>
539
540
540
541
If the animation has a duration of ''0s'' , it will occur instantaneously for any
@@ -661,7 +662,7 @@ The 'animation-delay' property</h3>
661
662
Similar to a delay of ''0s'' , it means that the animation executes immediately,
662
663
but is automatically progressed by the absolute value of the delay,
663
664
as if the animation had started the specified time in the past,
664
- and so it appears to start partway through its
665
+ and so it appears to start partway through its
665
666
<a href="#animation-iteration-count">active duration</a> .
666
667
If an animation's keyframes have an implied starting value,
667
668
the values are taken from the time the animation starts,
@@ -677,7 +678,7 @@ The 'animation-fill-mode' property</h3>
677
678
element) and the time it begins execution (which is determined by the 'animation-delay'
678
679
property). Also, by default an animation does not affect property values after the
679
680
animation ends (determined by the 'animation-duration' and 'animation-iteration-count' properties).
680
- The 'animation-fill-mode' property can override this behavior. Dynamic updates to the property will
681
+ The 'animation-fill-mode' property can override this behavior. Dynamic updates to the property will
681
682
be reflected by property values as needed, whether during the animation delay or after the animation ends.
682
683
683
684
<pre class='propdef'>
@@ -702,19 +703,19 @@ The 'animation-fill-mode' property</h3>
702
703
703
704
<dt> <dfn>forwards</dfn>
704
705
<dd>
705
- After the animation ends (as determined by its 'animation-iteration-count' ), the animation
706
- will apply the property values for the time the animation ended. When 'animation-iteration-count'
707
- is an integer greater than zero, the values applied will be those for the end of the last
708
- completed iteration of the animation (rather than the values for the start of the iteration
709
- that would be next). When 'animation-iteration-count' is zero, the values applied will be
706
+ After the animation ends (as determined by its 'animation-iteration-count' ), the animation
707
+ will apply the property values for the time the animation ended. When 'animation-iteration-count'
708
+ is an integer greater than zero, the values applied will be those for the end of the last
709
+ completed iteration of the animation (rather than the values for the start of the iteration
710
+ that would be next). When 'animation-iteration-count' is zero, the values applied will be
710
711
those that would start the first iteration (just as when 'animation-fill-mode' is ''backwards'' ).
711
712
712
713
<dt> <dfn>backwards</dfn>
713
714
<dd>
714
- During the period defined by 'animation-delay' , the animation will apply the property values
715
+ During the period defined by 'animation-delay' , the animation will apply the property values
715
716
defined in the keyframe that will start the first iteration of the animation.
716
- These are either the values of the ''from'' keyframe (when 'animation-direction' is ''normal''
717
- or ''alternate'' ) or those of the ''to'' keyframe (when 'animation-direction' is ''reverse''
717
+ These are either the values of the ''from'' keyframe (when 'animation-direction' is ''normal''
718
+ or ''alternate'' ) or those of the ''to'' keyframe (when 'animation-direction' is ''reverse''
718
719
or ''alternate-reverse'' ).
719
720
720
721
<dt> <dfn>both</dfn>
@@ -842,9 +843,9 @@ Types of <code>AnimationEvent</code></h3>
842
843
<dl dfn-type=event dfn-for=animationevent>
843
844
<dt> <dfn>animationstart</dfn>
844
845
<dd>
845
- The <a idl>animationstart</a> event occurs at the start of the animation.
846
- If there is an 'animation-delay' then this event will fire once the delay
847
- period has expired. A negative delay will cause the event to fire with
846
+ The <a idl>animationstart</a> event occurs at the start of the animation.
847
+ If there is an 'animation-delay' then this event will fire once the delay
848
+ period has expired. A negative delay will cause the event to fire with
848
849
an elapsedTime equal to the absolute value of the delay; in this case the
849
850
event will fire whether 'animation-play-state' is set to ''running'' or ''paused'' .
850
851
<ul>
@@ -923,10 +924,10 @@ Attributes</h4>
923
924
This attribute represents the keyframe selector as a comma-separated list of
924
925
percentage values. The ''from'' and ''to'' keywords map to 0% and 100%,
925
926
respectively.
926
-
927
- If <a attribute for="CSSKeyframeRule">keyText</a> is updated with an invalid keyframe selector,
927
+
928
+ If <a attribute for="CSSKeyframeRule">keyText</a> is updated with an invalid keyframe selector,
928
929
a <a spec="webidl">SyntaxError</a> exception must be thrown.
929
-
930
+
930
931
<dt> <dfn>style</dfn>
931
932
<dd>
932
933
This attribute represents the style associated with this keyframe.
@@ -960,8 +961,8 @@ Attributes</h4>
960
961
<dt> <dfn>name</dfn>
961
962
<dd>
962
963
This attribute is the name of the keyframes, used by the 'animation-name' property.
963
-
964
- Setting this property to a value matching a
964
+
965
+ Setting this property to a value matching a
965
966
<a href="http://www.w3.org/TR/css3-values/#common-keywords">CSS-wide keyword</a>
966
967
or any keyword defined for the 'animation-name' property will throw a <a spec="webidl">SyntaxError</a>
967
968
exception.
@@ -995,8 +996,8 @@ The <code>appendRule</code> method</h4>
995
996
<h4 id="interface-csskeyframesrule-deleterule">
996
997
The <code>deleteRule</code> method</h4>
997
998
998
- The <dfn method for="CSSKeyframesRule">deleteRule()</dfn> method deletes the
999
- last declared <a idl>CSSKeyframeRule</a> matching the specified keyframe selector.
999
+ The <dfn method for="CSSKeyframesRule">deleteRule()</dfn> method deletes the
1000
+ last declared <a idl>CSSKeyframeRule</a> matching the specified keyframe selector.
1000
1001
If no matching rule exists, the method does nothing.
1001
1002
1002
1003
Parameters:
@@ -1018,7 +1019,7 @@ The <code>deleteRule</code> method</h4>
1018
1019
<h4 id="interface-csskeyframesrule-findrule">
1019
1020
The <code>findRule</code> method</h4>
1020
1021
1021
- The <dfn method for="CSSKeyframesRule">findRule()</dfn> returns the
1022
+ The <dfn method for="CSSKeyframesRule">findRule()</dfn> returns the
1022
1023
last declared <a idl>CSSKeyframeRule</a> matching the specified keyframe selector.
1023
1024
If no matching rule exists, the method does nothing.
1024
1025
@@ -1045,7 +1046,7 @@ The <code>findRule</code> method</h4>
1045
1046
<div class='example'>
1046
1047
For example, given the following animation:
1047
1048
<pre>
1048
-
1049
+
1049
1050
@keyframes colorful-diagonal-slide {
1050
1051
1051
1052
from {
@@ -1054,7 +1055,7 @@ The <code>findRule</code> method</h4>
1054
1055
}
1055
1056
1056
1057
10% {
1057
- background-color: blue;
1058
+ background-color: blue;
1058
1059
}
1059
1060
1060
1061
10% {
0 commit comments