Sprite Sheet Animation

CSS3 Rotation Animation Tutorial

Learn to Add Rotating Images to Online Projects

CSS3 Rotation Example Introduction Basic CSS3 Animation Animation Overview CSS3 Animation Shorthand Repeat a CSS3 Animation Add JavaScript Interactivity Tips Summary Source Code Page

Introduction

This tutorial explains how to add rotating images to online games and Websites with CSS3 animation. The CSS3 Rotation Example simulates the effect of 3D rotation around the Y axis. This article also discusses some issues with CSS3 animations and offers helpful tips. This training session presents one work around for older browsers. See the JavaScript Simulated 3D Animation, for animation which runs in Internet Explorer 9, Android 2.2, and other older Web browsers.

3D or 2.5D Animation

The CSS3 Rotation Example appears to rotate a card around the vertical axis, in three dimensions. 2D animation which looks like 3D is called 2.5D.

Animation Overview

To simulate rotation around the Y axis of a graphic, gradually decrease the width to zero, then gradually return to the full width. JavaScript provides interactivity. Tap the card to play the animation. CSS3 keyframe rules and keyframe-selectors define the animation properties.

Basic CSS3 Animation

Create two identical keyframes rules. Include one @keyframes rule, for all browsers except Safari and Chrome. Include one @-webkit-keyframes rule for Safari and Chrome. Give both @keyframes and @-webkit-keyframes rules the same name. The example names both rules AnimOne. The following short listing demonstrates declaring keyframes rules named AnimOne.

@keyframes AnimOne 
{
...
}

@-webkit-keyframes AnimOne {
...
} 
	

Keyframe Rules

A keyframe rule modifies or animates CSS3 properties over time. Within each keyframe rule, declare keyframes-selectors with the values 0%, 50%, and 100%. The selector assigned 0% represents values when the timed animation first starts. The selector assigned 50% represents values in the middle of the timed animation. The selector assigned 100% represents values at the end of the timed animation.

The following selector assigns a width of 128 pixels and height of 192 pixels when the animation starts.

0% 
{
 width:128px; 
 height:192px;
}

For each keyframes-selector the example animation modifies the width property of an HTML Image element. However, it's important to assign the height along with the width. Some browsers modify both width and height together. We don't want the height property to change during the animation. Therefore every keyframes-selector assigns the Image's full height to the height property. The width starts at 128px, transitions to 0px, then returns to 128px. The height property for the Image remains at 192px.

The following keyframes-selectors animate the width from 128 pixels to zero pixels, then back to 128 pixels.

0%	{ 
width:128px;	
height:192px;
}

50%	{ 
width:0px;	
height:192px;
}

100%	{
width:128px;	
height:192px; 
}	
	

CSS3 Animation Shorthand

Create a CSS rule with the -webkit-animation property for Safari and Chrome browsers. Include an animation property for all other browsers. This example applies animation properties to -webkit-animation and animation properties with shorthand notation.

Shorthand notation allows assigning multiple values to one property. Assign the same values to both the animation and -webkit-animation properties. Assign values AnimOne 3s 2 to each property.

AnimOne is the name of both keyframes-selectors as described in the section titled Basic CSS3 Animation. The following line binds keyframes-selectors AnimOne to the CSS rule, with a duration of three seconds and two loops. Value 3s represents three seconds. Value 2 represents two loops. The animation runs twice. Each animation runs for three seconds.

.animOne {	
animation:AnimOne 3s 2;
...
}	

Repeat a CSS3 Animation

CSS3 animations execute only once. The preceding rules prepare the animation to run two loops. When the loops complete, nothing else happens. The following suggestings provide a work around which allows the animation to run every time the user taps the Image.

  1. Create a JavaScript time delay between animations.
  2. Remove then create a new HTML element for each animation.
  3. Alternate CSS3 rules between animations.

The CSS3 Rotation Example applies the third option. Create two identical CSS rules with different names. For each tap on the Image alternate style names.

For example JavaScript applies im.className = "animOne" to the image's style the first time the user taps the image. The next time the user taps the image, JavaScript assigns animTwo. Assign a new style with the following line of code.

im.className = "animTwo"

See the CSS3 Rotation Animation Source Code source code for more details.

Add JavaScript Interactivity

Assign an onclick event handler to the HTML Image element. The following markup assigns JavaScript event handler animPlay() to activate each time the user taps the image.

<img 
 id="im" 
 src="../assets/math-symbols.gif" 
 alt="Mathematical Symbols" 
 onclick="animPlay()"
/>

When the Web page loads, JavaScript saves a reference to the Image which will animate with CSS3.

im = document.getElementById(
 'im'
);

Each click on the Image, alternates the CSS className applied to the Image.

The following listing demonstrates alternating styles when animOne() activates. Additionally note animationPlayState = 'running'; activates the CSS3 animation.

function animPlay(){
      
if (bOne == true){ 
 im.className = "animTwo";
 bOne = false;
}
else {
 im.className = "animOne";
 bOne = true;
}

im.style.animationPlayState = 'running';

im.style.webkitAnimationPlayState = 'running'; 
  
}
	

Tips

Internet Explorer 9 doesn't display CSS3 animations. You might want to include a JavaScript fallback for Internet Explorer 9 and other older browsers which don't support CSS3 animations. See the JavaScript Simulated 3D Animation Example for details.

Jumpy Animation

If the animation-duration was less than 3 seconds it appeared to jump. The animation sequence wasn't smooth. We saw the problem with older browsers FireFox 28.0 and Google Chrome 33.0.1750.154. Solutions include setting the animation-duration to 3 seconds or preparing the animation with JavaScript instead. See the JavaScript Simulated 3D Animation Example for details.

Summary

This tutorial explained how to add rotating images to online games and Websites with CSS3 animation. The CSS3 Rotation Example simulates the effect of 3D rotation around the Y axis. This article also discussed some issues with CSS3 animations and offers helpful tips. This training session presented one work around for older browsers. See the JavaScript Simulated 3D Animation, for animation which runs in Internet Explorer 9, Android 2.2, and other older Web browsers. See more HTML5 examples below.

More HTML5 Examples

Animated Effects
Copyright © 2015 Seven Thunder Software. All Rights Reserved.