Skip to content

Commit 4c680d7

Browse files
smfrsmfr
committed
2010-03-10 simon.fraser@apple.com
- enhance the Abstract and Introduction.
1 parent 60c2b27 commit 4c680d7

3 files changed

Lines changed: 57 additions & 31 deletions

File tree

‎css3-animations/ChangeLog‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2010-03-10 simon.fraser@apple.com
2+
3+
- enhance the Abstract and Introduction.
4+

‎css3-animations/Overview.html‎

Lines changed: 27 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,10 @@ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 10 March 2010</h2>
8383

8484
<h2 class="no-num no-toc" id=abstract>Abstract</h2>
8585

86-
<p>CSS Animations allow an author to modify CSS property values over time.
86+
<p>This CSS module describes a way for authors to animate the values of CSS
87+
properties over time, using keyframes. The behavior of these keyframe
88+
animations can be controlled by specifying their duration, number of
89+
repeats, and repeating behavior.
8790

8891
<h2 class="no-num no-toc" id=status>Status of this document</h2>
8992
<!--begin-status-->
@@ -126,7 +129,7 @@ <h2 class="no-num no-toc" id=contents>Table of contents</h2>
126129
<ul class=toc>
127130
<li><a href="#introduction"><span class=secno>1. </span>Introduction</a>
128131

129-
<li><a href="#keyframes-"><span class=secno>2. </span> Keyframes </a>
132+
<li><a href="#keyframes"><span class=secno>2. </span>Keyframes</a>
130133
<ul class=toc>
131134
<li><a href="#timing-functions-for-keyframes-"><span class=secno>2.1.
132135
</span> Timing functions for keyframes </a>
@@ -196,18 +199,28 @@ <h2 id=introduction><span class=secno>1. </span>Introduction</h2>
196199

197200
<p><em>This section is not normative.</em>
198201

199-
<p> This document introduces new CSS features to enable animation.
200-
201-
<p> Animation is currently possible in languages like SVG, but no system
202-
exists for the native animation of CSS styles. This proposal introduces
203-
<em>defined animations</em>, which specify the values that CSS properties
204-
will take over a given time interval.
205-
206-
<p> This specification is an extension to CSS Transitions <a
207-
href="#CSS3-TRANSITIONS"
208-
rel=biblioentry>[CSS3-TRANSITIONS]<!--{{!CSS3-TRANSITIONS}}--></a>.
209-
210-
<h2 id=keyframes-><span class=secno>2. </span> Keyframes</h2>
202+
<p> CSS Transitions <a href="#CSS3-TRANSITIONS"
203+
rel=biblioentry>[CSS3-TRANSITIONS]<!--{{!CSS3-TRANSITIONS}}--></a> provide
204+
a way to interpolate CSS property values when they change as a result of
205+
underlying property changes. This provides an easy way to do simple
206+
animation, but the start and end states of the animation are controlled by
207+
the existing property values, and transitions provide little control to
208+
the author on how the animation progresses.
209+
210+
<p> This proposal introduces <em>defined animations</em>, in which the
211+
author can specify the changes in CSS properties over time as a set of
212+
keyframes. Unlike transitions, which are triggered by changes in the
213+
underlying property values, keyframe animations are triggered by the
214+
application of the animation properties themselves. While the animation is
215+
running, the property values in the keyframes are applied at the
216+
appropriate times.
217+
218+
<p> CSS Animations also provide greater control over the animation behavior
219+
than transitions. Animation properties allow the author to control how may
220+
times the animation repeats, the behavior when repeating, and to pause the
221+
animation mid-cycle.
222+
223+
<h2 id=keyframes><span class=secno>2. </span>Keyframes</h2>
211224

212225
<p> In a simple transition, since both the starting value and ending value
213226
are known, a single timing function and duration determine the

‎css3-animations/Overview.src.html‎

Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,10 @@ <h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
5656

5757
<h2 class="no-num no-toc" id="abstract">Abstract</h2>
5858

59-
<p>CSS Animations allow an author to modify CSS property values over
60-
time.
59+
<p>This CSS module describes a way for authors to animate the values of CSS properties over time, using keyframes.
60+
The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats,
61+
and repeating behavior.
62+
</p>
6163

6264
<h2 class="no-num no-toc" id="status">Status of this document</h2>
6365
<!--status-->
@@ -69,21 +71,28 @@ <h2 class="no-num no-toc" id="contents">Table of contents</h2>
6971

7072
<h2 id="introduction">Introduction</h2>
7173

72-
<p><em>This section is not normative.</em>
73-
74-
<p>
75-
This document introduces new CSS features to enable animation.
76-
</p>
77-
<p>
78-
Animation is currently possible in languages like SVG, but no system exists for the native animation of CSS styles. This proposal introduces <em>defined animations</em>, which specify the values that CSS properties will take over a given time interval.
79-
</p>
80-
<p>
81-
This specification is an extension to CSS Transitions
82-
[[!CSS3-TRANSITIONS]].
83-
</p>
84-
<h2>
85-
Keyframes
86-
</h2>
74+
<p><em>This section is not normative.</em>
75+
76+
<p>
77+
CSS Transitions [[!CSS3-TRANSITIONS]] provide a way to interpolate CSS property values
78+
when they change as a result of underlying property changes. This provides an easy way to do simple animation,
79+
but the start and end states of the animation are controlled by the existing property values,
80+
and transitions provide little control to the author on how the animation progresses.
81+
</p>
82+
<p>
83+
This proposal introduces <em>defined animations</em>, in which the author can
84+
specify the changes in CSS properties over time as a set of keyframes. Unlike transitions, which
85+
are triggered by changes in the underlying property values, keyframe animations are
86+
triggered by the application of the animation properties themselves. While the animation
87+
is running, the property values in the keyframes are applied at the appropriate times.
88+
</p>
89+
<p>
90+
CSS Animations also provide greater control over the animation behavior than transitions.
91+
Animation properties allow the author to control how may times the animation repeats, the behavior
92+
when repeating, and to pause the animation mid-cycle.
93+
</p>
94+
95+
<h2>Keyframes</h2>
8796
<p>
8897
In a simple transition, since both the starting value and ending value
8998
are known, a single timing function and duration determine the

0 commit comments

Comments
 (0)