CSS3 animations allow web developers to animate transitions from one CSS style to another. CSS3 animations consist of two components. The first is a style describing the CSS animation and the second is
a set of keyframes that indicate the start, optional intermediate, and end states of the animation's style. CSS3 animations are easier to use than traditional JavaScript driven animation techniques.
They generally run well, while JavaScript animations can execute poorly under heavy client system load.
Browser Support
Internet Explorer 9 does not support CSS3 animations. However, as of this writing, Internet Explorer 10, Firefox, Chrome, Safari, and Opera require the vendor prefixes for support.
| Browser | Vendor Prefix |
|---|
| Internet Explorer 10 | -ms-animation |
| Firefox | -moz-animation |
| Opera | -o-animation |
| Safari | -webkit-animation |
| Chrome | -webkit-animation |
Your browser
may support CSS3 Animations.
CSS3 @keyframes Rule
To create CSS3 animations, you need to include the corresponding @keyframes rule. The @keyframes rule is where the animation is created. You need to specify a CSS style inside the @keyframes rule
and the animation will change from the current style to the new style. Internet Explorer 9 does not support CSS3 animations. However, as of this writing, Internet Explorer 10, Firefox, Chrome, Safari, and
Opera require the vendor prefixes for support.
| Browser | Vendor Prefix |
|---|
| Internet Explorer 10 | @-ms-keyframes |
| Firefox | @-moz-keyframes |
| Opera | @-o-keyframes |
| Safari | @-webkit-keyframes |
| Chrome | @-webkit-keyframes |
@keyframes Rule Example
@keyframes myAnimation {
from {background-color: red;}
to {background-color: blue;}
}
@-moz-keyframes myAnimation {
from {background-color: red;}
to {background-color: blue;}
}
@-webkit-keyframes myAnimation {
from {background-color: red;}
to {background-color: blue;}
}
@-o-keyframes myAnimation {
from {background-color: red;}
to {background-color: blue;}
}
CSS3 Animation Property
The animation property is a shorthand property for the six animation properties. It does not include the animation-play-state property. The six properties are as follows:
animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, and animation-direction. Here is a listing of all of the properties with regard
to CSS3 animations.
| Property | Description |
|---|
| @keyframes | Specifies the animation to occur. |
| animation | A shorthand property for the six animation properties. |
| animation-name | Specifies the name of the @keyframes animation |
| animation-duration | Specifies how many seconds or milliseconds an animation takes to complete one cycle. The default is "0". |
| animation-timing-function | Describes how the animation will progress over one cycle of its duration. The default is "ease". |
| animation-delay | Specifies when the animation will start. The default is "0" (no delay). |
| animation-iteration-count | Specifies the number of times an animation is played. The default is "1" [n|infinite]. |
| animation-direction | Specifies whether or not the animation should play in reverse on alternate cycles. The default is "normal" [normal|alternate]. |
| animation-play-state | Specifies whether the animation is running or paused. The default is "running" [paused|running]. |
| animation-fill-mode | Specifies what values are applied by the animation outside the time it is executing. The default is "none" [none|forwards|backwards|both]. |
Animation Property Syntax
animation: name duration timing-function delay iteration-count direction;
Examples
Animations apply once the page is loaded and the CSS class is applied to the element. In the following examples, we assign the class to the element once the onclick event is triggered. Here is a simple
example where the background color of the square is changed from red to blue.
<!DOCTYPE html>
<html>
<head>
<style>
#divA {
font-size:2em;
color:white;
width:200px;
height:200px;
background:red;
}
.target {
-ms-animation:myAnimation 5s;
-moz-animation:myAnimation 5s;
-webkit-animation:myAnimation 5s;
-o-animation:myAnimation 5s;
animation:myAnimation 5s;
}
@-ms-keyframes myAnimation {
from {background:red;}
to {background:blue;}
}
@-moz-keyframes myAnimation {
from {background:red;}
to {background:blue;}
}
@-webkit-keyframes myAnimation {
from {background:red;}
to {background:blue;}
}
@-o-keyframes myAnimation {
from {background:red;}
to {background:blue;}
}
@keyframes myAnimation {
from {background:red;}
to {background:blue;}
}
</style>
<script>
function animateMe() {
document.getElementById('divA').className = 'target';
}
</script>
</head>
<body>
<div id="divA" onclick="animateMe()">Click on Me!</div>
</body>
</html>
Results
Click on Me!
CSS3 animations also allows you to apply more than one animation on an element at the same time. In this example, we will change the color and size of the element.
<!DOCTYPE html>
<html>
<head>
<style>
#divA {
font-size:2em;
color:white;
width:200px;
height:200px;
background:red;
}
.target {
-ms-animation:myAnimation 5s;
-moz-animation:myAnimation 5s;
-webkit-animation:myAnimation 5s;
-o-animation:myAnimation 5s;
animation:myAnimation 5s;
}
@-ms-keyframes myAnimation {
0% {background:red;width:200px;height:200px}
20% {background:orange;width:250px;height:200px}
40% {background:yellow;width:200px;height:250px}
60% {background:green;width:250px;height:200px}
80% {background:blue;width:200px;height:250px}
100% {background:purple;width:200px;height:200px}
}
@-moz-keyframes myAnimation {
0% {background:red;width:200px;height:200px}
20% {background:orange;width:250px;height:200px}
40% {background:yellow;width:200px;height:250px}
60% {background:green;width:250px;height:200px}
80% {background:blue;width:200px;height:250px}
100% {background:purple;width:200px;height:200px}
}
@-webkit-keyframes myAnimation {
0% {background:red;width:200px;height:200px}
20% {background:orange;width:250px;height:200px}
40% {background:yellow;width:200px;height:250px}
60% {background:green;width:250px;height:200px}
80% {background:blue;width:200px;height:250px}
100% {background:purple;width:200px;height:200px}
}
@-o-keyframes myAnimation {
0% {background:red;width:200px;height:200px}
20% {background:orange;width:250px;height:200px}
40% {background:yellow;width:200px;height:250px}
60% {background:green;width:250px;height:200px}
80% {background:blue;width:200px;height:250px}
100% {background:purple;width:200px;height:200px}
}
@keyframes myAnimation {
0% {background:red;width:200px;height:200px}
20% {background:orange;width:250px;height:200px}
40% {background:yellow;width:200px;height:250px}
60% {background:green;width:250px;height:200px}
80% {background:blue;width:200px;height:250px}
100% {background:purple;width:200px;height:200px}
}
</style>
<script>
function animateMe() {
document.getElementById('divA').className = 'target';
}
</script>
</head>
<body>
<div id="divA" onclick="animateMe()">Click on Me!</div>
</body>
</html>
Results
Click on Me!
How can I Maintain the End State?
Unfortunately when the animation is over, the element's style will fall back to the original settings prior to the animation taking place. There is a way to maintain the final state. This can be done
by applying a new class to the element via JavaScript, or you can use the "animation-fill-mode" property with a value of "forwards".
If the value for "animation-fill-mode" is "forwards", then after the animation ends, the animation will apply the property values for the time the animation ended.
If the value for "animation-fill-mode" is "backwards", then the animation will apply the property values defined in the keyframe that will start the first iteration of the animation, during the period
defined by "animation-delay". If the value for "animation-fill-mode" is "both", then the animation will follow the rules for both "forwards" and "backwards". That is, it will extend the animation
properties in both directions.
.target {
-ms-animation:myAnimation 5s forwards;
-moz-animation:myAnimation 5s forwards;
-webkit-animation:myAnimation 5s forwards;
-o-animation:myAnimation 5s forwards;
animation:myAnimation 5s forwards;
}
Click on Me!
Did you find the page informational and useful? Share it using one of your favorite social sites.
Recommended Books & Training Resources
