Skip to content

Commit 818d361

Browse files
author
Sylvain Galineau
committed
Fix typo in section 3 (missing 'a')
1 parent ff47236 commit 818d361

2 files changed

Lines changed: 111 additions & 110 deletions

File tree

‎css3-animations/Overview.html‎

Lines changed: 110 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
<!DOCTYPE html>
23

34
<html lang=en>
@@ -15,14 +16,14 @@
1516

1617
<h1>CSS Animations</h1>
1718

18-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 30 May 2012</h2>
19+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 20 June 2012</h2>
1920

2021
<dl>
2122
<dt>This version:
2223

2324
<dd><a
24-
href="http://www.w3.org/TR/2012/ED-css3-animations-20120530/">http://dev.w3.org/csswg/css3-animations/</a>
25-
<!--http://www.w3.org/TR/2012/WD-css3-animations-20120530/-->
25+
href="http://www.w3.org/TR/2012/ED-css3-animations-20120620/">http://dev.w3.org/csswg/css3-animations/</a>
26+
<!--http://www.w3.org/TR/2012/WD-css3-animations-20120620/-->
2627

2728
<dt>Latest version:
2829

@@ -353,22 +354,22 @@ <h2 id=animations><span class=secno>2. </span> Animations</h2>
353354
<div class=example>
354355
<pre>
355356
div {
356-
animation-name: diagonal-slide;
357-
animation-duration: 5s;
358-
animation-iteration-count: 10;
357+
animation-name: diagonal-slide;
358+
animation-duration: 5s;
359+
animation-iteration-count: 10;
359360
}
360361

361362
@keyframes diagonal-slide {
362363

363-
from {
364-
left: 0;
365-
top: 0;
366-
}
364+
from {
365+
left: 0;
366+
top: 0;
367+
}
367368

368-
to {
369-
left: 100px;
370-
top: 100px;
371-
}
369+
to {
370+
left: 100px;
371+
top: 100px;
372+
}
372373

373374
}</pre>
374375

@@ -437,7 +438,7 @@ <h2 id=keyframes><span class=secno>3. </span> Keyframes</h2>
437438
within a @keyframes rule if multiple keyframes specify the same keyframe
438439
selector values.
439440

440-
<p> If property is not specified for a keyframe, or is specified but
441+
<p> If a property is not specified for a keyframe, or is specified but
441442
invalid, the animation of that property proceeds as if that keyframe did
442443
not exist. Conceptually, it is as if a set of keyframes is constructed for
443444
each property that is present in any of the keyframes, and an animation is
@@ -446,21 +447,21 @@ <h2 id=keyframes><span class=secno>3. </span> Keyframes</h2>
446447
<div class=example>
447448
<pre>
448449
@keyframes wobble {
449-
0% {
450-
left: 100px;
451-
}
450+
0% {
451+
left: 100px;
452+
}
452453

453-
40% {
454-
left: 150px;
455-
}
454+
40% {
455+
left: 150px;
456+
}
456457

457-
60% {
458-
left: 75px;
459-
}
458+
60% {
459+
left: 75px;
460+
}
460461

461-
100% {
462-
left: 100px;
463-
}
462+
100% {
463+
left: 100px;
464+
}
464465
}</pre>
465466

466467
<p> Four keyframes are specified for the animation named "wobble". In the
@@ -504,29 +505,29 @@ <h3 id=timing-functions><span class=secno>3.1. </span> Timing functions for
504505
<pre>
505506
@keyframes bounce {
506507

507-
from {
508-
top: 100px;
509-
animation-timing-function: ease-out;
510-
}
508+
from {
509+
top: 100px;
510+
animation-timing-function: ease-out;
511+
}
511512

512-
25% {
513-
top: 50px;
514-
animation-timing-function: ease-in;
515-
}
513+
25% {
514+
top: 50px;
515+
animation-timing-function: ease-in;
516+
}
516517

517-
50% {
518-
top: 100px;
519-
animation-timing-function: ease-out;
520-
}
518+
50% {
519+
top: 100px;
520+
animation-timing-function: ease-out;
521+
}
521522

522-
75% {
523-
top: 75px;
524-
animation-timing-function: ease-in;
525-
}
523+
75% {
524+
top: 75px;
525+
animation-timing-function: ease-in;
526+
}
526527

527-
to {
528-
top: 100px;
529-
}
528+
to {
529+
top: 100px;
530+
}
530531

531532
}</pre>
532533

@@ -630,50 +631,50 @@ <h3 id=animation-name-property><span class=secno>3.2. </span> The ‘<a
630631
grammar</abbr>
631632
</table>
632633
<!--
633-
<p>
634-
It is possible for elements to have multiple animations running that change the same property or properties. In this case the animations combine in a manner defined by the property. For example, animations on 'opacity' will add together and animations on 'transform' will have their transformation matrices multiplied.
635-
636-
<div class="example">
637-
<p style="display:none">
638-
Example(s):
639-
640-
<pre>
641-
@keyframes 'border-bloat' {
642-
from {
643-
border-width: 0;
644-
}
645-
to {
646-
border-width: 10px;
647-
}
648-
}
649-
650-
@keyframes 'border-diet' {
651-
from {
652-
border-width: 4px;
653-
}
654-
to {
655-
border-width: 2px;
656-
}
657-
}
658-
659-
div {
660-
animation-name: 'border-bloat', 'border-diet';
661-
animation-duration: 10s, 4s;
662-
}
663-
</pre>
664-
<p>
665-
The above example has two animations executing on the same property, 'border-width'. The animations are additive. That is, the
666-
resulting value for the property will be the addition of the values from the
667-
two animations.
668-
669-
<p>
670-
At time '0s' the element's border will be 4px wide (0px from 'border-bloat' plus 4px from 'border-diet').
671-
At time '4s' the element's border will be 6px wide (4px from 'border-bloat' plus 2px from 'border-diet').
672-
At time '10s' the element's border will be 10px wide (10px from 'border-bloat' and no addition from
673-
'border-diet' as it is no longer executing).
674-
675-
</div>
676-
-->
634+
<p>
635+
It is possible for elements to have multiple animations running that change the same property or properties. In this case the animations combine in a manner defined by the property. For example, animations on 'opacity' will add together and animations on 'transform' will have their transformation matrices multiplied.
636+
637+
<div class="example">
638+
<p style="display:none">
639+
Example(s):
640+
641+
<pre>
642+
@keyframes 'border-bloat' {
643+
from {
644+
border-width: 0;
645+
}
646+
to {
647+
border-width: 10px;
648+
}
649+
}
650+
651+
@keyframes 'border-diet' {
652+
from {
653+
border-width: 4px;
654+
}
655+
to {
656+
border-width: 2px;
657+
}
658+
}
659+
660+
div {
661+
animation-name: 'border-bloat', 'border-diet';
662+
animation-duration: 10s, 4s;
663+
}
664+
</pre>
665+
<p>
666+
The above example has two animations executing on the same property, 'border-width'. The animations are additive. That is, the
667+
resulting value for the property will be the addition of the values from the
668+
two animations.
669+
670+
<p>
671+
At time '0s' the element's border will be 4px wide (0px from 'border-bloat' plus 4px from 'border-diet').
672+
At time '4s' the element's border will be 6px wide (4px from 'border-bloat' plus 2px from 'border-diet').
673+
At time '10s' the element's border will be 10px wide (10px from 'border-bloat' and no addition from
674+
'border-diet' as it is no longer executing).
675+
676+
</div>
677+
-->
677678

678679
<h3 id=animation-duration-property><span class=secno>3.3. </span> The ‘<a
679680
href="#animation-duration"><code
@@ -1315,13 +1316,13 @@ <h4 id=AnimationEvent-IDL><span class=secno>4.1.1. </span> IDL Definition</h4>
13151316

13161317
<pre class=idl>
13171318
interface AnimationEvent : Event {
1318-
readonly attribute DOMString animationName;
1319-
readonly attribute float elapsedTime;
1320-
void initAnimationEvent(in DOMString typeArg,
1321-
in boolean canBubbleArg,
1322-
in boolean cancelableArg,
1323-
in DOMString animationNameArg,
1324-
in float elapsedTimeArg);
1319+
readonly attribute DOMString animationName;
1320+
readonly attribute float elapsedTime;
1321+
void initAnimationEvent(in DOMString typeArg,
1322+
in boolean canBubbleArg,
1323+
in boolean cancelableArg,
1324+
in DOMString animationNameArg,
1325+
in float elapsedTimeArg);
13251326
};</pre>
13261327

13271328
<h4 id=AnimationEvent-attributes><span class=secno>4.1.2. </span>
@@ -1461,10 +1462,10 @@ <h4 id=CSSRule-IDL><span class=secno>5.1.1. </span> IDL Definition</h4>
14611462

14621463
<pre class=idl>
14631464
interface CSSRule {
1464-
...
1465-
const unsigned short KEYFRAMES_RULE = 7;
1466-
const unsigned short KEYFRAME_RULE = 8;
1467-
...
1465+
...
1466+
const unsigned short KEYFRAMES_RULE = 7;
1467+
const unsigned short KEYFRAME_RULE = 8;
1468+
...
14681469
};</pre>
14691470

14701471
<h3 id=CSSKeyframeRule-interface><span class=secno>5.2. </span> Interface
@@ -1477,8 +1478,8 @@ <h4 id=CSSKeyframeRule-IDL><span class=secno>5.2.1. </span> IDL Definition</h4>
14771478

14781479
<pre class=idl>
14791480
interface CSSKeyframeRule : CSSRule {
1480-
attribute DOMString keyText;
1481-
readonly attribute CSSStyleDeclaration style;
1481+
attribute DOMString keyText;
1482+
readonly attribute CSSStyleDeclaration style;
14821483
};</pre>
14831484

14841485
<h4 id=CSSKeyframeRule-attributes><span class=secno>5.2.2. </span>
@@ -1510,12 +1511,12 @@ <h4 id=CSSKeyframesRule-IDL><span class=secno>5.3.1. </span> IDL Definition</h4>
15101511

15111512
<pre class=idl>
15121513
interface CSSKeyframesRule : CSSRule {
1513-
attribute DOMString name;
1514-
readonly attribute CSSRuleList cssRules;
1514+
attribute DOMString name;
1515+
readonly attribute CSSRuleList cssRules;
15151516

1516-
void appendRule(in DOMString rule);
1517-
void deleteRule(in DOMString key);
1518-
CSSKeyframeRule findRule(in DOMString key);
1517+
void appendRule(in DOMString rule);
1518+
void deleteRule(in DOMString key);
1519+
CSSKeyframeRule findRule(in DOMString key);
15191520
};</pre>
15201521

15211522
<h4 id=CSSKeyframesRule-attributes><span class=secno>5.3.2. </span>
@@ -1643,7 +1644,7 @@ <h2 class=no-num id=property-index>Property index</h2>
16431644

16441645
<th>Initial
16451646

1646-
<th>Applies to
1647+
<th>Applies to
16471648

16481649
<th>Inh.
16491650

‎css3-animations/Overview.src.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -276,7 +276,7 @@ <h2 id="keyframes">
276276
There is no cascading within a @keyframes rule if multiple keyframes specify the same keyframe selector values.
277277

278278
<p>
279-
If property is not specified for a keyframe,
279+
If a property is not specified for a keyframe,
280280
or is specified but invalid,
281281
the animation of that property proceeds as if that keyframe did not exist.
282282
Conceptually,

0 commit comments

Comments
 (0)