Sprite Sheet Animation

CSS3 Animated Gradient Color Background Tutorial

Introduction CSS3 Color Animation Example CSS3 Animation Explanation Keyframes JavaScript Start & Stop Summary Source Code CSS HTML Markup JavaScript More Color Tutorials!

Introduction

Learn to create interactive CSS3 animation. This tutorial demonstrates the basics of CSS3 color animation. The tutorial and source code cover both JavaScript and CSS3 features. This article explains how to start and stop the CSS3 animation with JavaScript. The CSS3 Animated Gradient Color Background example animates the Web page's background color when you tap the Play button.

CSS3 Animation Explanation

CSS3 color animation modifies the background or foreground color of an HTML element over time. Numerical values define the amount of time to transition from one color to the next.

Currently each CSS property for an animation should be declared twice. Declare a property once for Safari and Chrome browsers, and a second time for all other browsers which support CSS3 animation.

Include the -webkit-animation property for Safari and Chrome browsers. Include the animation property for all other browsers.

The -webkit-animation and animation properties include the same three values. The values represent a user defined keyframe name, a time duration, and a repeat value. For example the following rule-set selector named .anim includes properties animation and -webkit-animation. Each property includes user defined keyframe name cAnim, a time duration 5s, and the number of times to repeat the animation infinite.

.anim
{
 background:white;
 animation:cAnim 5s infinite;
 
 /* Safari and Chrome */
 -webkit-animation:cAnim 5s infinite; 
}

The animation named cAnim will run for 5 seconds, and repeat an infinite number of times.

Keyframes

Numerical values define the amount of time to transition from one color to the next. For maximum compatibility use percentages between 0% to 100%. For example a percentage of 0% will display the associated color at the starting time. A percentage of 100% will display the associated color at the ending time.

Create keyframes named cAnim which add time and background values. Declare the @-webkit-keyframes animation for Chrome and Safari. Declare the @keyframes animation for other CSS3 enabled Web browsers. Both keyframe rule-sets are named cAnim. They will run for 5 seconds, and repeat an infinite number of times, as previously declared.

@keyframes cAnim
{...}

@-webkit-keyframes cAnim 
{...}
	

Each keyframes animation includes three sets of values. The first value is 0% {background:white; } which sets the starting frame's background property to white. The second value is 50% {background:blue; } which sets the middle frame's background property to blue. The third value is 0% {background:white; } which sets the ending frame's background property to white.

The animation cycles infinitely from white, to blue, then back to white again. The following listing demonstrates creating keyframes.

@keyframes cAnim
{
 0% 
 {
  background:white;
 }
 
 50% 
 {
  background:blue;
 }
 
 100%
 {
  background:white; 
 }
}
	

Include a rule-set which will be used to reset the background and foreground color. The following rule-set assigns the background color to white and the foreground color to black.

.wt {
 background-color:white; 
 color:black;
}

See the CSS3 Source for more details.

JavaScript Start and Stop

JavaScript assigns the name of a style to an HTML element's style property. To start the animation, assign the anim style to the HTML element's style property. To stop the animation, assign the wt style to the HTML element's style property.

The following listing demonstrates starting the animation.

function animRun(){			
 document.body.className = "anim";
 document.body.style.animationPlayState = 'running';
 document.body.style.webkitAnimationPlayState = 'running';		
}

The following listing demonstrates stopping the animation.

function animStop(){
 document.body.className = "wt";
}	
	

Assign JavaScript functions animRun() and animStop to button onclick event listeners. See the JavaScript Source Code and the HTML5 markup for more details.

Summary

This tutorial explained how to create interactive CSS3 animation. The tutorial and source code cover both JavaScript and CSS3 features. This article explained how to start and stop the CSS3 animation with JavaScript. CSS3 Animated Gradient Color Background example animates the Web page's background color when you tap the Play button.

See the CSS3 Interactive Animation Source Code or More HTML5 Examples.

More HTML5 Examples

Copyright © 2015 Seven Thunder Software. All Rights Reserved.