22
33<pre class='metadata'>
44Status : ED
5+ Work Status : Refining
56Shortname : css-animations
67Level : 1
78Group : csswg
@@ -90,29 +91,29 @@ Animations</h2>
9091
9192 While running, the animation computes the value of those properties
9293 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]] ).
9495
9596 The start time of an animation is the time at which the style applying
9697 the animation and the corresponding @keyframes rule are both resolved.
9798 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
105106 rules does not start or restart an animation.
106-
107+
107108
108109 An animation applies to an element if its name appears as one of the
109110 identifiers in the computed value of the 'animation-name' property and the
110111 animation uses a valid @keyframes rule. Once an
111112 animation has started it continues until it ends or the 'animation-name' is
112113 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
116117 according to the new animation property values.
117118
118119 Note also that changing the value
@@ -200,7 +201,7 @@ Keyframes</h2>
200201 declarations qualified with !important are ignored.
201202
202203 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.
204205
205206 <div class='example'>
206207 <pre>
@@ -253,7 +254,7 @@ Keyframes</h2>
253254
254255 To determine the set of keyframes, all of the values in the selectors are sorted in increasing order
255256 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.
257258
258259 If a property is not specified for a keyframe, or is specified but invalid, the animation of that
259260 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>
414415 The animation will use the keyframes with the name specified by the <<custom-ident>> ,
415416 if they exist.If no such keyframes exist, there is no animation.
4164
685E
17
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>
418419 and keywords defined by this property are not valid animation names.
419420 </dl>
420421
@@ -445,15 +446,15 @@ The 'animation-duration' property</h3>
445446 If the <<time>> is ''0s'' , like the initial value,
446447 the keyframes of the animation have no effect,
447448 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.
457458 </dl>
458459
459460<h3 id="animation-timing-function">
@@ -487,10 +488,10 @@ The 'animation-timing-function' property</h3>
487488 ease in at the start of its second iteration,
488489 and ease out again as it approaches the end of the animation.
489490
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
491492 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
494495 of the animation's current direction.
495496
496497<h3 id="animation-iteration-count">
@@ -502,9 +503,9 @@ The 'animation-iteration-count' property</h3>
502503 'animation-direction' value of ''alternate'' , which will cause the animation to play in
503504 reverse on alternate cycles.
504505
505- The time window during which the animation is active
506+ The time window during which the animation is active
506507 (<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> .
508509
509510 <pre class='propdef'>
510511 Name : animation-iteration-count
@@ -524,17 +525,17 @@ The 'animation-iteration-count' property</h3>
524525 <dl dfn-type=value dfn-for=animation-iteration-count>
525526 <dt> <dfn>infinite</dfn>
526527 <dd>
527- The animation will repeat forever.
528+ The animation will repeat forever.
528529
529530 <dt> <dfn><<number>></dfn>
530531 <dd>
531532 <p> The animation will repeat the specified number of times.
532533 If the number is not an integer,
533534 the animation will end partway through its last cycle.
534- Negative numbers are invalid.
535+ Negative numbers are invalid.
535536
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.
538539 </dl>
539540
540541 If the animation has a duration of ''0s'' , it will occur instantaneously for any
@@ -661,7 +662,7 @@ The 'animation-delay' property</h3>
661662 Similar to a delay of ''0s'' , it means that the animation executes immediately,
662663 but is automatically progressed by the absolute value of the delay,
663664 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
665666 <a href="#animation-iteration-count">active duration</a> .
666667 If an animation's keyframes have an implied starting value,
667668 the values are taken from the time the animation starts,
@@ -677,7 +678,7 @@ The 'animation-fill-mode' property</h3>
677678 element) and the time it begins execution (which is determined by the 'animation-delay'
678679 property). Also, by default an animation does not affect property values after the
679680 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
681682 be reflected by property values as needed, whether during the animation delay or after the animation ends.
682683
683684 <pre class='propdef'>
@@ -702,19 +703,19 @@ The 'animation-fill-mode' property</h3>
702703
703704 <dt> <dfn>forwards</dfn>
704705 <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
710711 those that would start the first iteration (just as when 'animation-fill-mode' is ''backwards'' ).
711712
712713 <dt> <dfn>backwards</dfn>
713714 <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
715716 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''
718719 or ''alternate-reverse'' ).
719720
720721 <dt> <dfn>both</dfn>
@@ -842,9 +843,9 @@ Types of <code>AnimationEvent</code></h3>
842843 <dl dfn-type=event dfn-for=animationevent>
843844 <dt> <dfn>animationstart</dfn>
844845 <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
848849 an elapsedTime equal to the absolute value of the delay; in this case the
849850 event will fire whether 'animation-play-state' is set to ''running'' or ''paused'' .
850851 <ul>
@@ -923,10 +924,10 @@ Attributes</h4>
923924 This attribute represents the keyframe selector as a comma-separated list of
924925 percentage values. The ''from'' and ''to'' keywords map to 0% and 100%,
925926 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,
928929 a <a spec="webidl">SyntaxError</a> exception must be thrown.
929-
930+
930931 <dt> <dfn>style</dfn>
931932 <dd>
932933 This attribute represents the style associated with this keyframe.
@@ -960,8 +961,8 @@ Attributes</h4>
960961 <dt> <dfn>name</dfn>
961962 <dd>
962963 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
965966 <a href="http://www.w3.org/TR/css3-values/#common-keywords">CSS-wide keyword</a>
966967 or any keyword defined for the 'animation-name' property will throw a <a spec="webidl">SyntaxError</a>
967968 exception.
@@ -995,8 +996,8 @@ The <code>appendRule</code> method</h4>
995996<h4 id="interface-csskeyframesrule-deleterule">
996997The <code>deleteRule</code> method</h4>
997998
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.
10001001 If no matching rule exists, the method does nothing.
10011002
10021003 Parameters:
@@ -1018,7 +1019,7 @@ The <code>deleteRule</code> method</h4>
10181019<h4 id="interface-csskeyframesrule-findrule">
10191020The <code>findRule</code> method</h4>
10201021
1021- The <dfn method for="CSSKeyframesRule">findRule()</dfn> returns the
1022+ The <dfn method for="CSSKeyframesRule">findRule()</dfn> returns the
10221023 last declared <a idl>CSSKeyframeRule</a> matching the specified keyframe selector.
10231024 If no matching rule exists, the method does nothing.
10241025
@@ -1045,7 +1046,7 @@ The <code>findRule</code> method</h4>
10451046 <div class='example'>
10461047 For example, given the following animation:
10471048 <pre>
1048-
1049+
10491050 @keyframes colorful-diagonal-slide {
10501051
10511052 from {
@@ -1054,7 +1055,7 @@ The <code>findRule</code> method</h4>
10541055 }
10551056
10561057 10% {
1057- background-color: blue;
1058+ background-color: blue;
10581059 }
10591060
10601061 10% {
0 commit comments