Compare Revisions

Using CSS animations

Change Revisions

Revision 341543:

Revision 341543 by teoli on

Revision 351833:

Revision 351833 by penter on

Title:
Using CSS animations
Using CSS animations
Slug:
CSS/Tutorials/Using_CSS_animations
CSS/Tutorials/Using_CSS_animations
Tags:
"css", "CSS3", "CSS Reference", "animations", "css3-animations"
"css", "CSS3", "CSS Reference", "animations", "css3-animations"
Content:

Revision 341543
Revision 351833
n8      <strong>CSS3 animations</strong> make it possible to animatn8      &nbsp;edited by Dead"&lt;&gt;body
>e transitions from one CSS style configuration to another. Animat 
>ions consist of two components, a style describing the CSS animat 
>ion and a set of keyframes that indicate the start and end states 
> of the animation's style, as well as possible intermediate waypo 
>ints along the way. 
t10    <p>t
11      There are three key advantages to CSS&nbsp;animations over 
>traditional script-driven animation techniques: 
12    </p>
13    <ol>
14      <li>They're easy to use for simple animations; you can crea
>te them without even having to know JavaScript. 
15      </li>
16      <li>The animations run well, even under moderate system loa
>d. Simple animations can often perform poorly in JavaScript (unle 
>ss they're well made). The rendering engine can use frame-skippin 
>g and other techniques to keep the performance as smooth as possi 
>ble. 
17      </li>
18      <li>Letting the browser control the animation sequence lets
> the browser optimize performance and efficiency by, for example, 
> reducing the update frequency of animations running in tabs that 
> aren't currently visible. 
19      </li>
20    </ol>
21    <h2 id="Configuring_the_animation">
22      Configuring the animation
23    </h2>
24    <p>
25      To create a&nbsp;CSS&nbsp;animation sequence, you style the
> element you want to animate with the {{ cssxref("animation") }}& 
>nbsp;property or its sub-properties. This lets you configure the  
>timing and duration of the animation, as well as other details of 
> how the animation sequence should progress. This does <strong>no 
>t</strong> configure the actual appearance of the animation, whic 
>h is done using the {{ cssxref("@keyframes") }}&nbsp;at-rule as d 
>escribed in {{ anch("Defining the animation sequence using keyfra 
>mes") }}&nbsp;below. 
26    </p>
27    <p>
28      The sub-properties of the {{ cssxref("animation") }}&nbsp;p
>roperty are: 
29    </p>
30    <dl>
31      <dt>
32        {{ cssxref("animation-delay") }}
33      </dt>
34      <dd>
35        Configures the delay between the time the element is load
>ed and the beginning of the animation sequence. 
36      </dd>
37      <dt>
38        {{ cssxref("animation-direction") }}
39      </dt>
40      <dd>
41        Configures whether or not the animation should alternate 
>direction on each run through the sequence or reset to the start  
>point and repeat itself. 
42      </dd>
43      <dt>
44        {{ cssxref("animation-duration") }}
45      </dt>
46      <dd>
47        Configures the length of time that an animation should ta
>ke to complete one cycle. 
48      </dd>
49      <dt>
50        {{ cssxref("animation-iteration-count") }}
51      </dt>
52      <dd>
53        Configures the number of times the animation should repea
>t; you can specify <code>infinite</code> to repeat the animation  
>indefinitely. 
54      </dd>
55      <dt>
56        {{ cssxref("animation-name") }}
57      </dt>
58      <dd>
59        Specifies the name of the {{ cssxref("@keyframes") }}&nbs
>p;at-rule describing the animation's keyframes. 
60      </dd>
61      <dt>
62        {{ cssxref("animation-play-state") }}
63      </dt>
64      <dd>
65        Lets you pause and resume the animation sequence.
66      </dd>
67      <dt>
68        {{ cssxref("animation-timing-function") }}
69      </dt>
70      <dd>
71        Configures the timing of the animation; that is, how the 
>animation transitions through keyframes, by establishing accelera 
>tion curves. 
72      </dd>
73      <dt>
74        {{ cssxref("animation-fill-mode") }}
75      </dt>
76      <dd>
77        Configures what values are applied by the animation befor
>e and after it is executing. 
78      </dd>
79    </dl>
80    <h2 id="Defining_the_animation_sequence_using_keyframes">
81      Defining the animation sequence using keyframes
82    </h2>
83    <p>
84      Once you've configured the animation's timing, you need to 
>define the appearance of the animation. This is done by establish 
>ing two or more keyframes using the {{ cssxref("@keyframes") }} a 
>t-rule. Each keyframe describes how the animated element should r 
>ender at a given time during the animation sequence. 
85    </p>
86    <p>
87      Since the timing of the animation is defined in the CSS&nbs
>p;style that configures the animation, keyframes use a {{ cssxref 
>("percentage") }} to indicate the time during the animation seque 
>nce at which they take place. 0% indicates the first moment of th 
>e animation sequence, while 100% indicates the final state of the 
> animation. These two times must be specified so that the browser 
> knows where the animation should start and finish; because they' 
>re so important, these two times have special aliases: <code>from 
></code> and <code>to</code>. 
88    </p>
89    <p>
90      You can optionally include additional keyframes that descri
>be intermediate steps along the way from the starting point to th 
>e ending point of the animation. 
91    </p>
92    <h2 id="Examples">
93      Examples
94    </h2>
95    <div class="note">
96      <strong>Note:</strong> The examples here don't use any pref
>ix on the animation CSS properties. WebKit-based browsers and old 
>er version of the other browsers may need prefixes; the live exam 
>ples you can click to see in your browser also include the <code> 
>-webkit</code> prefixed versions. 
97    </div>
98    <h3 id="Making_text_slide_across_the_browser_window">
99      Making text slide across the browser window
100    </h3>
101    <p>
102      This simple example styles the {{ HTMLElement("h1") }} elem
>ent so that the text slides in from off the right edge of the bro 
>wser window. 
103    </p>
104    <pre class="brush: css">
105h1 {
106  animation-duration: 3s;
107  animation-name: slidein;
108}
109 
110@keyframes slidein {
111  from {
112    margin-left: 100%;
113    width: 300%
114  }
115 
116  to {
117    margin-left: 0%;
118    width: 100%;
119  }
120}
121</pre>
122    <p>
123      The style for the {{ HTMLElement("h1") }}&nbsp;element here
> specifies that the animation should take 3 seconds to execute fr 
>om start to finish, using the {{ cssxref("animation-duration") }} 
> property, and that the name of the {{ cssxref("@keyframes") }} a 
>t-rule defining the keyframes for the animation sequence is named 
> "slidein". 
124    </p>
125    <p>
126      If we wanted any custom styling on the {{ HTMLElement("h1")
> }} element to appear in browsers that don't support CSS&nbsp;ani 
>mations, we would include it here as well; however, in this case  
>we don't want any custom styling other than the animation effect. 
127    </p>
128    <p>
129      The keyframes are defined using the {{ cssxref("@keyframes"
>) }} at-rule. In this case, we have just two keyframes. The first 
> occurs at 0%&nbsp;(using the alias <code>from</code>). Here, we  
>configure the left margin of the element to be at 100% (that is,  
>at the far right edge of the containing element), and the width o 
>f the element to be 300% (or three times the width of the contain 
>ing element). This causes the first frame of the animation to hav 
>e the header drawn off the right edge of the browser window. 
130    </p>
131    <p>
132      The second (and final)&nbsp;keyframe occurs at 100% (using 
>the alias <code>to</code>). The left margin is set to 0% and the  
>width of the element is set to 100%. This causes the header to fi 
>nish its animation flush against the left edge of the content are 
>a. 
133    </p>
134    <p>
135      {{ CSSLiveSample("animations/cssanim1.html") }}
136    </p>
137    <h4 id="Adding_another_keyframe">
138      Adding another keyframe
139    </h4>
140    <p>
141      Let's add another keyframe to the previous example's animat
>ion. Let's say we want the header's font size to increase as it m 
>oves from right to left for a while, then to decrease back to its 
> original size. That's as simple as adding this keyframe: 
142    </p>
143    <pre class="brush: css">
14475% {
145  font-size: 300%;
146  margin-left: 25%;
147  width: 150%;
148}
149</pre>
150    <p>
151      This tells the browser that 75% of the way through the anim
>ation sequence, the header should have its left margin at 25% and 
> the width should be 150%. 
152    </p>
153    <p>
154      {{ CSSLiveSample("animations/cssanim2.html") }}
155    </p>
156    <h4 id="Making_it_repeat">
157      Making it repeat
158    </h4>
159    <p>
160      To make the animation repeat itself, simply use the {{ cssx
>ref("animation-iteration-count") }} property to indicate how many 
> times to repeat the animation. In this case, let's use <code>inf 
>inite</code> to have the animation repeat indefinitely: 
161    </p>
162    <pre class="brush: css">
163h1 {
164  animation-duration: 3s;
165  animation-name: slidein;
166  animation-iteration-count: infinite;
167}
168</pre>
169    <p>
170      {{ CSSLiveSample("animations/cssanim3.html") }}
171    </p>
172    <h4 id="Making_it_move_back_and_forth">
173      Making it move back and forth
174    </h4>
175    <p>
176      That made it repeat, but it's very odd having it jump back 
>to the start each time it begins animating. What we really want i 
>s for it to move back and forth across the screen. That's easily  
>accomplished by setting {{ cssxref("animation-direction") }}&nbsp 
>;to <code>alternate</code>: 
177    </p>
178    <pre class="brush: css">
179h1 {
180  animation-duration: 3s;
181  animation-name: slidein;
182  animation-iteration-count: infinite;
183  animation-direction: alternate;
184}
185</pre>
186    <p>
187      {{ CSSLiveSample("animations/cssanim4.html") }}
188    </p>
189    <h3 id="Using_animation_events">
190      Using animation events
191    </h3>
192    <p>
193      You can get additional control over animations -- as well a
>s useful information about them -- by making use of animation eve 
>nts. These events, represented by the {{ domxref("event/Animation 
>Event", "AnimationEvent") }} object, can be used to detect when a 
>nimations start, finish, and begin a new iteration. Each event in 
>cludes the time at which it occurred as well as the name of the a 
>nimation that triggered the event. 
194    </p>
195    <p>
196      We'll modify the sliding text example to output some inform
>ation about each animation event when it occurs, so we can get a  
>look at how they work. 
197    </p>
198    <h4 id="Adding_the_animation_event_listeners">
199      Adding the animation event listeners
200    </h4>
201    <p>
202      We'll use JavaScript code to listen for all three possible 
>animation events. The <code>setup()</code> function configures ou 
>r event listeners; we call it when the document is first loaded i 
>n order to set things up. 
203    </p>
204    <pre class="brush: js">
205function setup() {
206  var e = document.getElementById("watchme");
207  e.addEventListener("animationstart", listener, false);
208  e.addEventListener("animationend", listener, false);
209  e.addEventListener("animationiteration", listener, false);
210  
211  var e = document.getElementById("watchme");
212  e.className = "slidein";
213}
214</pre>
215    <p>
216      This is pretty standard code; you can get details on how it
> works in the documentation for {{ domxref("element.addEventListe 
>ner()") }}. The last thing the setup() function here does is set  
>the <code>class</code> on the element we'll be animating to "slid 
>ein"; we do this to start the animation. 
217    </p>
218    <p>
219      Why? Because the <code>animationstart</code> event fires as
> soon as the animation starts, and in our case, that happens befo 
>re our code runs. So we'll start the animation ourselves by setti 
>ng the class of the element to the style that gets animated after 
> the fact. 
220    </p>
221    <h4 id="Receiving_the_events">
222      Receiving the events
223    </h4>
224    <p>
225      The events get delivered to the <code>listener()</code> fun
>ction, which is shown below. 
226    </p>
227    <pre class="brush: js">
228function listener(e) {
229  var l = document.createElement("li");
230  switch(e.type) {
231    case "animationstart":
232      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
233      break;
234    case "animationend":
235      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
236      break;
237    case "animationiteration":
238      l.innerHTML = "New loop started at time " + e.elapsedTime;
239      break;
240  }
241  document.getElementById("output").appendChild(l);
242}
243</pre>
244    <p>
245      This code, too, is very simple. It simply looks at the {{ d
>omxref("event.type") }} to determine which kind of animation even 
>t occurred, then adds an appropriate note the {{ HTMLElement("ul" 
>) }} (unordered list) we're using to log these events. 
246    </p>
247    <p>
248      The output, when all is said and done, looks something like
> this: 
249    </p>
250    <ul>
251      <li>Started: elapsed time is 0
252      </li>
253      <li>New loop started at time 3.01200008392334
254      </li>
255      <li>New loop started at time 6.00600004196167
256      </li>
257      <li>Ended: elapsed time is 9.234000205993652
258      </li>
259    </ul>
260    <p>
261      Note that the times are very close to, but not exactly, tho
>se expected given the timing established when the animation was c 
>onfigured. Note also that after the final iteration of the animat 
>ion, the <code>animationiteration</code> event isn't sent; instea 
>d, the <code>animationend</code> event is sent. 
262    </p>
263    <h4 id="The_HTML">
264      The HTML
265    </h4>
266    <p>
267      Just for the sake of completeness, here's the HTML that dis
>plays the page content, including the list into which the script  
>inserts information about the received events: 
268    </p>
269    <pre class="brush: html">
270&lt;body onload="setup()"&gt;
271  &lt;h1 id="watchme"&gt;Watch me move&lt;/h1&gt;
272  &lt;p&gt;This example shows how to use CSS animations to make &
>lt;code&gt;H1&lt;/code&gt; elements 
273  move across the page.&lt;/p&gt;
274  &lt;p&gt;In addition, we output some text each time an animatio
>n event fires, so you can see them in action.&lt;/p&gt; 
275  &lt;ul id="output"&gt;
276  &lt;/ul&gt;
277&lt;/body&gt;
278</pre>
279    <p>
280      {{ CSSLiveSample("animations/animevents.html") }}
281    </p>
282    <h2 id="See_also">
283      See also
284    </h2>
285    <ul>
286      <li>{{ domxref("AnimationEvent", "AnimationEvent") }}
287      </li>
288      <li>{{ CSS_Reference:animation() }}
289      </li>
290      <li>
291        <a href="/en-US/docs/CSS/CSS_animations/Detecting_CSS_ani
>mation_support" title="en/CSS/CSS animations/Detecting CSS animat 
>ion support">Detecting CSS animation support</a> 
292      </li>
293      <li>This <a class="external" href="http://hacks.mozilla.org
>/2011/06/add-on-sdk-and-the-beta-of-add-on-builder-now-available/ 
>" title="http://hacks.mozilla.org/2011/06/add-on-sdk-and-the-beta 
>-of-add-on-builder-now-available/">post</a> from Mozilla hacks, p 
>rovides two additional examples: 
294        <ul>
295          <li>
296            <a class="external" href="http://jsfiddle.net/T88X5/3
>/light/" rel="freelink">http://jsfiddle.net/T88X5/3/light/</a> 
297          </li>
298          <li>
299            <a class="external" href="http://jsfiddle.net/RtvCB/9
>/light/" rel="freelink">http://jsfiddle.net/RtvCB/9/light/</a> 
300          </li>
301        </ul>
302      </li>
303      <li>Blog post by David Walsh: <a href="http://davidwalsh.na
>me/css-flip" title="http://davidwalsh.name/css-flip">CSS Flip Ani 
>mation</a> 
304      </li>
305    </ul>

Back to History