gearlogo

CSS3 Animations

Wednesday, November 28, 2012

tags CSS3
browser

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.


BrowserVendor 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.


BrowserVendor 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.


PropertyDescription
@keyframesSpecifies the animation to occur.
animationA shorthand property for the six animation properties.
animation-nameSpecifies the name of the @keyframes animation
animation-durationSpecifies how many seconds or milliseconds an animation takes to complete one cycle. The default is "0".
animation-timing-functionDescribes how the animation will progress over one cycle of its duration. The default is "ease".
animation-delaySpecifies when the animation will start. The default is "0" (no delay).
animation-iteration-countSpecifies the number of times an animation is played. The default is "1" [n|infinite].
animation-directionSpecifies whether or not the animation should play in reverse on alternate cycles. The default is "normal" [normal|alternate].
animation-play-stateSpecifies whether the animation is running or paused. The default is "running" [paused|running].
animation-fill-modeSpecifies 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

HTML CSS and JavaScript The Book of CSS3 Sergeys HTML5 CSS3