3 Step CSS Animation Tutorial

CSS3 includes the ability to animate elements using nothing more that pure CSS – no JavaScript or Flash required.  An animation is defined as the transition of an element moving from one state to another.  For example a simple square can be move from one position to another using CSS e.g.

CSS Animation illustration

This simple transition can be achieve with the following HTML and CSS:

<!DOCTYPE html>
<html>
	<head>
		<title>Simple CSS Animation</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link href='http://fonts.googleapis.com/css?family=Unkempt:700' rel='stylesheet' type='text/css'>
		<style>
			#square {
				height: 150px;
				width: 150px;
				background-color: #ccc;
				animation: moveSquare 4s infinite;
				-webkit-animation: moveSquare 4s infinite; /* Safari and Chrome */
				position: absolute;
				top: 90px;
				left: 0px;
			}

			@keyframes moveSquare {
				0% { background-color: #ccc; }
				100% { background-color: #ff0000; left: 800px; }
			}

			@-webkit-keyframes moveSquare {
				0% { background-color: #ccc; left: 0px; }
				100% { background-color: #ff0000; left: 800px; }
			}
			
			p {
				font-family: 'Unkempt', cursive;
			}
			
		</style>
	</head>
	<body>
		<p>The first step of a three step tutorial showing how to build an animation using CSS3. <a href="simple-css-football-animation.html">Step 2</a>&nbsp;Read more at my Blog <a href=" https://geeksretreat.wordpress.com/2013/05/12/3-step-css-animation-tutorial">Geek's retreat</a></p>
		<div id="square"></div>
	</body>
</html>

This example is rather uninteresting, so let’s liven it up a little. We’ll introduce a real world object into the animation:

football

Then we can modify the code by adding a background image to the div element:

<!DOCTYPE html>
<html>
	<head>
		<title>Simple CSS Animation - Football</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link href='http://fonts.googleapis.com/css?family=Unkempt:700' rel='stylesheet' type='text/css'>
		<style>
			#square {
				height: 150px;
				width: 150px;
				background-color: #ccc;
				animation: moveSquare 4s infinite;
				-webkit-animation: moveSquare 4s infinite; /* Safari and Chrome */
				position: absolute;
				top: 90px;
				left: 0px;
				background-image: url('football.jpg');
			}

			@keyframes moveSquare {
				0% { left: 0px; }
				100% { left: 800px; }
			}

			@-webkit-keyframes moveSquare {
				0% { left: 0px; }
				100% { left: 800px; }
			}
			
			p {
				font-family: 'Unkempt', cursive;
			}
			
		</style>
	</head>
	<body>
		<p>The second step of a three step tutorial showing how to build an animation using CSS3. <a href="simple-css-animation.html">Step 1</a>&nbsp;|&nbsp;<a href="simple-css-football-animation-roll.html">Step 3</a>&nbsp;Read more at my Blog <a href=" https://geeksretreat.wordpress.com/2013/05/12/3-step-css-animation-tutorial">Geek's retreat</a>s</p>
		<div id="square"></div>
	</body>
</html>

Although we’ve introduced a real world object in a football. It’s obvious that it doesn’t move like a football. It simply slides from left to right. The animation needs to make the ball roll. This can be achieved with the following:

<!DOCTYPE html>
<html>
	<head>
		<title>Simple CSS Animation</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link href='http://fonts.googleapis.com/css?family=Unkempt:700' rel='stylesheet' type='text/css'>
		<style>
			#square {
				height: 150px;
				width: 150px;
				background-color: #ccc;
				animation: moveSquare 4s infinite;
				-webkit-animation: moveSquare 4s infinite; /* Safari and Chrome */
				position: absolute;
				top: 90px;
				left: 0px;
				background-image: url('football.jpg	')
			}

			@keyframes moveSquare {
				0% { background-color: #ccc; transform: rotate(0deg);}
				100% { background-color: #ff0000; left: 800px; transform: rotate(360deg);}
			}

			@-webkit-keyframes moveSquare {
				0% { background-color: #ccc; left: 0px; -webkit-transform: rotate(0deg);}
				100% { background-color: #ff0000; left: 800px; -webkit-transform: rotate(360deg);}
			}
			
			p {
				font-family: 'Unkempt', cursive;
			}
			
		</style>
	</head>
	<body>
		<p>The final step of a three step tutorial showing how to build an animation using CSS3. <a href="simple-css-football-animation.html">Step 2</a>&nbsp;Read more at my Blog <a href=" https://geeksretreat.wordpress.com/2013/05/12/3-step-css-animation-tutorial">Geek's retreat</a>	</p>
		<div id="square"></div>
	</body>
</html>

This animation now looks real (I hope) and for me this is the key!

A working example of the three steps above can be seen here step 1, step 2 and step 3.

Advertisements

One thought on “3 Step CSS Animation Tutorial

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s