This tutorial will demonstrate how to create a basic CSS animation. It is assumed that you already have a basic knowledge of HTML and CSS.
By the end of the exercise you will be able to:
- Utilise the @keyframes element to create an animation.
- Bind the animation to a selector using the animation element.
- Use a 2D transformation element within the animation code.
Note: The animation property is, at time of writing, only supported by Chrome, Safari 4+, Firefox 5+ and some mobile browsers. It will not work in Opera or Internet Explorer.
Download the source files here:
Set Up
Start by creating a root folder to store your files. It’s good practice to create an images folder and a CSS folder inside the root to keep your files organised.
Create a new HTML and CSS document in your code editor of choice (e.g. Dreamweaver, Notepad. I’m using TextEdit in the example.) Remember to include a link to the external style sheet in the <head> tag of your HTML document.
<link href="css/style.css" rel="stylesheet">
Create some <div> tags within the <body> of your HTML document. Assign each of them with a unique id. We’re going to use these divisions to display and position the cog images we are going to animate. Each image has different dimensions and will require a different set of instructions to make the animation work the way we want it.
In your CSS document, insert @charset “UTF-8″; followed by a CSS Reset at the top of the document. I’ve used Eric Meyer’s CSS Reset in the example, which you can get from this website: http://meyerweb.com/eric/tools/css/reset/
Save your HTML document as cogs.html into your root folder, and your stylesheet as style.css in your css folder.
Next, set up the page defaults in your CSS document, styling the body selector with a background, colours, fonts, etc.
@keyframes
We’re going to start by creating the animation.
Create a space underneath the body selector and type in the following code:
@keyframes cogs {
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
@keyframes is the rule where the animation is created. Immediately following it is the name of the animation, which is “cogs” in this example. You must give your animation a name in order for it to be bound to a selector.
0% and 100% are the first and last frames of the animation. These must also be included in the @keyframes rule in order for your animation to work properly across all browsers. I used transform:rotate() in both keyframes to instruct the animation to start at 0 degrees in the first frame and rotate to 360 degrees by the last frame. The animation element, which we will look at shortly, fills in the gaps between the two frames using a process known as “tweening”. Tweening is the process of creating immediate frames between two images to give the appearance that one image is evolving into another. It is a feature predominantly seen in animation software such as Adobe Flash.
The above code is the default statement for @keyframes. This alone will not work. You need to copy the code twice and add the appropriate prefixes for Safari, Chrome and Firefox in order for it work in these browsers. You also need to include the prefixes for the transform property for each browser.
/* Default */
@keyframes cogs {
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
/* Safari/Chrome */
@-webkit-keyframes cogs {
0% {-webkit-transform:rotate(0deg);}
100% {-webkit-transform:rotate(360deg);}
}
/* Firefox */
@-moz-keyframes cogs {
0% {-moz-transform:rotate(0deg);}
100% {-moz-transform:rotate(360deg);}
}
Creating and styling selectors
With the animation in place, we need to bind it to a selector in order to view it in the browser. We’ll style the selectors first before we apply the animation element.
Underneath @keyframes code, create three new id selectors with names matching the ids that you set up with your <div> tags in your HTML document earlier. If you’re using the graphics I’ve supplied with this tutorial, you will need to copy them into your images folder.
Assign a cog graphic as a background with no-repeat to each selector. Check the pixel dimensions of each image and use the information to set an absolute width and height for the selector. Set the position to relative and use the top and left properties to position the cogs on the screen. See the code below for an example of how to style your selectors.
/* COG GRAPHICS */
#cog1 {
position:relative; /* moves easily around the window */
top:100px;
left:100px;
background:url(../imgs/cog1.png) no-repeat;
width:150px;
height:150px;
z-index:1; /* allows overlapping of another element */
}
#cog2 {
position:relative;
top:20px;
left:100px;
background:url(../imgs/cog2.png) no-repeat;
width:350px;
height:350px;
}
#cog3 {
position:relative;
top:-150px;
left:362px;
background:url(../imgs/cog3.png) no-repeat;
width:200px;
height:200px;
}
Save the CSS document and load your HTML document in Chrome, Safari or Firefox to preview it. You should have something that looks like this on your screen:
Binding the animation to a selector
Now for the fun part! We’re going to use the animation property to link the @keyframes rule to a selector in order to animate it.
Create a new line within #cog1 selector underneath your styles and add the following code:
#cog1 {
position:relative; /* moves easily around the window */ top:100px; left:100px; background:url(../imgs/cog1.png) no-repeat; width:150px; height:150px; z-index:1; /* allows overlapping of another element */
/* ANIMATION PROPERTY */
animation: cogs 10s ease-in-out; /* name duration timing-function */
-webkit-animation: cogs 10s ease-in-out; /* Safari/Chrome */
-moz-animation: cogs 10s ease-in-out; /* Firefox */
}
In the code above, I’ve stated the name of the animation (cogs), a duration of 10s and the timing-function within a single line of code. The name and duration are the most important pieces information and must always be included, otherwise your animation will not work. I’ve also added a timing-function to the line. This is the speed at which the animation runs, and this particular setting starts the animation off slowly, allows it to build up to a regular speed and then slows it down to a stop. I’ve also included the prefixes for the browsers in the following lines.
We’re going to bind the same @keyframes animation to the other two selectors, but change the animation property values in order to make them behave differently. The idea behind the cogs animation is that as the first cog starts turning and builds up speed, the other two also begin to turn in the same way but after a brief delay, making it look like a mechanism at work. We’ll use a delay value within the animation property in order to achieve this effect. The delay will pause the animation for the specified time (in seconds) and then run it.
In #cog2, create a new line and copy and paste the code from #cog1 into this space. Change the duration to 8s and after the timing-function (ease-in-out), add 2s. Ensure you do this on all three animation lines, otherwise it will not work. The reason we’re setting the duration and delay to 8s and 2s respectfully is to ensure that the entire animation length for #cog1 and #cog2 is equal to 10 seconds (including the delay).
#cog2 {
position:relative; top:20px; left:100px; background:url(../imgs/cog2.png) no-repeat; width:350px; height:350px;
/* ANIMATION PROPERTY */
animation: cogs 8s ease-in-out 2s; /* name duration timing-function delay */ -webkit-animation: cogs 8s ease-in-out 2s; /* Safari/Chrome */ -moz-animation: cogs 8s ease-in-out 2s; /* Firefox */
}
Copy and paste the code into #cog3 and change the duration to 6s and delay to 4s.
#cog3 {
position:relative; top:-150px; left:362px; background:url(../imgs/cog3.png) no-repeat; width:200px; height:200px;
/* ANIMATION PROPERTY */ animation: cogs 6s ease-in-out 4s; /* name duration timing-function delay */ -webkit-animation: cogs 6s ease-in-out 4s; /* Safari/Chrome */ -moz-animation: cogs 6s ease-in-out 4s; /* Firefox */
}
Save your CSS document and load the HTML document in Chrome, Safari or Firefox. The animation should begin straight away with the first cog slowly turning and building up speed. The second cog will begin after 2 seconds and will follow the same pattern, as will the third cog.
And that’s it! You’ve just created a CSS animation!
Check out the finished animation:
Further Reading
W3Schools – CSS3 Animations: http://www.w3schools.com/css3/css3_animations.asp
Full documentation of CSS3 animation property and @keyframes rule.
