Create CSS Animation in HTML5 Games

On September 19, 2012, in HTML5, by James Liu

New Update: HTML5 Animation for IE, Chrome and Firefox

There are several ways to create animation in HTML5 games. I am going to show you how to create HTML5 animation by CSS 3 in Chrome, Safari, Firefox and IE. To make the CSS animation, we need to get a sprite sheet animation png files, which you can:

  1. Create Sprite Sheet Animation From Flash
  2. Convert GIF Animation to Sprite Sheet Animation


First of all, we need to add two div which are the container of the CSS animation.

		<div class="animContainer">
			<div class="animDiv move" id="animDiv">
			</div>
		</div>

Then, let’s apply the CSS style on the div

			.animContainer
			{
				width: 174px;
				height: 134px;
				overflow: hidden;
			}
			
			.animDiv
			{
				background: transparent url('spritesheet.png');
				width: 4350px;
				height: 134px;
				position: relative;
			}

Create CSS Animations in Chrome and Safari

We will create animations effect by CSS 3 for webkit based browser such as Chrome and Safari.

			.move
			{
				-webkit-animation: move 1s steps(25, end) infinite;
				-webkit-animation-play-state:paused
			}
			
			@-webkit-keyframes move
			{
				0% {left: 0px;}
				100% {left: -4350px;}
			}

In above example, we have a sprite sheet animation png file, which has 4350 pixels width. In the sprite sheet, each frame is 174×134 pixels. Therefore, there are 25 frames in the sprite sheet animation ( 174 x 25 = 4350 ). We define a move keyframes animation by @-webkit-keyframes move. Then, we apply the move keyframes animation to the .move class DOM.

Start and Stop CSS Animations in Chrome and Safari

Besides applying the CSS to the DOM, we can also use Javascript to control the CSS animations. In webkit based browsers, we can use following way to start and stop the CSS animations.

			function startAnimation()
			{
				document.getElementById("animDiv").style.webkitAnimationPlayState = "running";
			}
			
			function stopAnimation()
			{
				document.getElementById("animDiv").style.webkitAnimationPlayState = "paused";
			}

Let’s see the CSS 3 sprite sheet animation in HTML example:

Create CSS Animations in Firefox

With the same concept, we can create the CSS animations in Firefox by replacing -webkit prefix with -moz. Here is the code example:

			.move
			{
				-moz-animation: move 1s steps(25, end) infinite;
				-moz-animation-play-state:	paused;
			}
			
			@-moz-keyframes move
			{
				0% {left: 0px;}
				100% {left: -4350px;}
			}

Start and Stop CSS Animations in Firefox

Firefox is not webkit based browser, so we cannot use the same Javascript code to control the CSS animations in Firefox. To start and stop CSS animations in Firefox, you can use following Javascript code example. Please pay attention on the the capital “M” in MozAnimationPlayState.

			function startAnimation()
			{
				document.getElementById("animDiv").style.MozAnimationPlayState = "running";
			}
			
			function stopAnimation()
			{
				document.getElementById("animDiv").style.MozAnimationPlayState = "paused";
			}

Create CSS Animations in IE10

IE9 does not support CSS Animations totally. As the Microsoft announced, Internet Explorer 10 will support the CSS animations. I will update the section after IE10 is officially released. Please check HTML5 Animation for IE, Chrome and Firefox below.

Create CSS Animations in iPhone and iPad Browser

Because the default web browser in iPhone and iPad is Safari, we can use exactly the same code we are using in Webkit based browser like Chrome. Please check HTML5 Animation for IE, Chrome and Firefox below.

HTML5 Animation in IE, Chrome and Firefox (Sprite Sheet Animation)

Because lack of support from different browsers, CSS3 animation still has lots of problems in different browsers or the same browsers with different versions. So I try to find a new way to implement the animation in HTML. Some friends recommend me to use HTML5 Canvas. I am afraid that HTML5 Canvas animation may have the same problems as CSS3 animation. To make an animation which can run smoothly in as many browsers as possible, I have to use some common technologies. There are several questions in my mind:

  • How to create HTML animation in IE8?
  • How to create HTML animation in Firefox?
  • How to create HTML animation in Chrome?
  • How to create HTML animation in Safari?
  • How to create HTML animation in Android Browser?
  • How to create HTML animation in iPhone and iPad Browser?

After several researches, I find the solution for above questions. The answer is sprite sheet animation, a classical animation concept existing in game industry for years. In the rest of article, I will show you how to implement the sprite sheet animation in HTML by Javascript and CSS. In this example, I will use the same image. The animation concept is using a javascript timer to change the background image position, instead of changing the div position.

Firstly, I will define a animation holder, this is the same as above example.

		<div class="animContainer">
			<div class="animDiv move" id="animDiv">
			</div>
		</div>

Secondly, set the animation holder’s background image by CSS. This part is a little bit different from previous example. I set the the animation holder’s size as frame size.

			.animContainer
			{
				width: 174px;
				height: 134px;
				overflow: hidden;
			}
			
			.animDiv
			{
				background: transparent url('spritesheet.png');
				width: 174px;
				height: 134px;
			}

Thirdly, I define a Javascript timer to control the background image position. We can set the timer duration to control the animation speed. Here is the example code:

		<script type="text/javascript">
			var animationTimer = null;
			var currentbgx = 0;
			var animDiv = null;
			
			function startAnimation()
			{
				if(animationTimer == null)
				{
					animationTimer = setInterval(playAnimation, 50);
				}
			}
			
			function stopAnimation()
			{
				clearInterval(animationTimer);
				animationTimer = null;
			}
			
			function playAnimation()
			{
				if(animDiv == null)
				{
					animDiv = document.getElementById("animDiv");
				}
				
				animDiv.style.backgroundPosition = currentbgx + "px 0";
				currentbgx -= 174;
				if (currentbgx < -4350) {
					currentbgx = 0;
				}
			}
		</script>

Now, let’s play the animation.

Tagged with:  

1 Response » to “Create CSS Animation in HTML5 Games”

  1. Bhaskar says:

    Thanks you save me from big problem.

Leave a Reply

Premium WordPress Themes

Weboy