PageResource.com - Web Development Tutorials

CSS3 Animation Tutorial

With CSS3 animation functions, you can take any element and apply an animation to it. You no longer need to create an animation in a separate program or use plug-ins. The browser will implement the animation for you. As with other properties, you will need to use browser specific prefixes.

There are two parts to making animation with CSS3. This first part is a set of animation properties. These properties control the timing part of the animation and help bind the animation to the second part of the CSS3 animations, which is the @keyframes rule. We begin with a look at each of the animation properties. We will then look at the @keyframes rule and look at an example which combines the two parts of the CSS3 animation.

 
Animation Name

The animation-name property is used to designate a name for the animation you create. This name will be used to bind the animation to the @keyframes rule.

Example:

div
{
animation-name: mymovie;
-moz-animation-name: mymovie;
-webkit-animation-name: mymovie;
}

 
Animation Duration

The animation-duration property allows you to set the duration of the animation in seconds or milliseconds. You must set a duration for your animation in order for it to work. If no time is specified the property is set to zero by default and no animation will occur.

Example:

div
{
 
animation-duration: 10s;
-moz-animation-duration: 10s;
-webkit-animation-duration: 10s;
}

 
Animation Timing Function

The animation-timing-function property, is similar to the transition-timing-function. It lets your control the rhythm of the animation. It has six values. They are, linear, ease, ease-in, ease-out, ease-in-out, and cubic-bezier.

Value Description
linear The animation plays at the same speed
ease This the default. The animation starts slow, speeds up and ends slowly
ease-in The animation starts slowly
ease-out The animation ends slowly
ease-in-out The animation has starts slowly and ends slowly
cubic-bezier(n,n,n,n) Define your own values in the cubic-bezier function
Possible values are numeric values from 0 to 1

Example:

div
{
animation-timing-function: linear;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}

 
Animation Delay

The animation-delay property lets you delay the start of an animation by a specified period of time. The time value can be set in seconds or milliseconds.

Example:


div
{
animation-delay: 2s;
-moz-animation-delay: 2s;
-webkit-animation-delay: 2s;
}

 
Animation Iteration Count

The animation-iteration-count property lets you control the number of times the animation will loop. There are two possible values. You can either set it to a specific number, 2, 10 etc., or you can set it to infinite. Setting the value to infinite lets the animation loop as long as the page remains open.

Example:

div
{
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}

 
Animation Direction

The animation-direction property lets you set the control the direction of play. By default the animation plays forward. You can use the animation-direction property to reverse the direction of the animation. There are two possible values for this property normal or alternate. Normal is the default setting and plays the animation forwards. When the property is set to alternate, the animation alternates between forward and backwards. For example, if you set your animation-iteration-count to infinite, and then set the animation-direction to alternate, the animation will play forwards on every odd count (1,3,4..) and backward on every even count (2,4,6…).

Example:

div
{
animation-direction: alternate;
-moz-animation-direction: alternate;
-webkit-animation-direction: alternate;
}

 
Animation

The animation shorthand property lets you set the all the above properties into one property.

Example:

div
{
animation: mymovie 10s linear 2s infinite alternate;
-moz-animation: mymovie 10s linear 2s infinite alternate;
-webkit-animation: mymovie 10s linear 2s infinite alternate;
}

 
@keyframes Rule

The @keyframes rule is where you specify the property you would like to animate and how you would like to animate it. You can animate any property like text or background color. You can also animate multiple properties like background color and size of an element. To get a better sense of how to use the @keyframes rule, let us look at an example.

For example let us say you want the background color of the element to cycle between two colors –red and blue. There are two ways to set up the animation. One is using the keywords “from” and “to.” The other is using percentages.


@keyframes mymovie
{
from  {background: red;}
to  {background: blue;}
}

This is the same as:


@keyframes mymovie
{
0%  {background: red;}
100%  {background: blue;}
}

Now let us look at an example that combines the animation property and the @keyframes rule. In this example we will change the background color of a <div> from red to blue. We will also change the width and height of the <div> from 100px to 200px.


div
{
height: 100px;
width: 100px;
background: red;
animation:mymovie 10s linear 2s infinite alternate;
-moz-animation:mymovie 10s linear 2s infinite alternate; /*Firefox */
-webkit-animation:mymovie 10s linear 2s infinite alternate;/*Safari Chrome */
}

@keyframes mymovie {
0%  {background: red; height:100px; width:100px;}
50%  {background: blue; height:200px; width:200px;}
100%  {background: red; height:100px; width:100px;}
}

/* Firefox */

@-moz-keyframes mymovie {
0%  {background: red; height:100px; width:100px;}
50%  {background: blue; height:200px; width:200px;}
100%  {background: red; height:100px; width:100px;}
}

/* Safari and Chrome */

@-webkit-keyframes mymovie {
0%  {background: red; height:100px; width:100px;}
50%  {background: blue; height:200px; width:200px;}
100%  {background: red; height:100px; width:100px;}
}

Here is what it looks like at the start of the animation. (Note: This is not a working example. These are just images.)

Here is what it looks like during the transition. As you can see, the browser automatically blends red and blue as the animation transitions from red to blue. This creates a seamless effect. The same is true of the height and width.

Here is what it looks like at the half way point in the animation

Leave a Reply


Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy