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
