One of the main reasons the emergence of CSS3 has been so hotly anticipated is the fact that, in combination with HTML5, it will pose a genuine alternative to technologies such as Flash. With CSS3 and HTML5, you will ultimately be able to create animated, interactive multimedia applications that will be accessible to users regardless of whether Flash is supported in their environment – great news if you’re developing Web apps for iOS or for mobile users in general. In this tutorial we will create a simple first animation using CSS3 keyframes.
Our animation is going to feature a childish cartoon bus moving along the X axis, speeding up in the middle before slowing down again. The bus and wheels will be separate images, with the wheels spinning as the bus moves. These are our image files:
Here is a screenshot from the final animation:
Create a Web Page
Let’s create an HTML5 page as follows:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>Add the image elements to the body section of your page, including the bus and two copies of the wheel:
<div>
<img class="bus" src="bus.png"/>
<img class="b_wheel" src="wheel.png"/>
<img class="f_wheel" src="wheel.png"/>
</div>We will use the class attributes to apply styling to the image elements.
Apply Default Styling
Start your CSS3 code by adding style properties for the container “div” as follows:
/*background element*/
div {
width:600px;
height:220px;
background: linear-gradient(top, blue, green);
background: -moz-linear-gradient(top, blue, green);
background: -webkit-linear-gradient(top, blue, green);
}Here we simply apply a gradient background together with dimensions. Notice that the prefixes we are using only include the default syntax plus versions for Mozilla and Webkit (Safari and Chrome). Internet Explorer and Opera do not yet support the techniques we will be using in this tutorial so we will not be targeting them.
Now add properties for the initial style of your wheel images:
/*initial properties*/
.f_wheel {
position:absolute;
top:160px;
left:190px;
}
.b_wheel {
position:absolute;
top:160px;
left:50px;
}We use absolute positioning to make sure the wheels and bus are displayed correctly and will move together. Add the initial styling for the bus image:
/*bus properties*/
.bus {
position:absolute;
top:50px;
left:30px;
/*animations*/
}We are going to add more properties in this block, indicating the animations we want to apply to the bus element.
Indicate the Animations
Our bus moving and wheel spinning animations are going to be specified using CSS3 keyframes. We will define the animations in dedicated keyframes sections, but we also need to tell the browser to apply these animations to particular elements. Add the following to your existing “.bus” declarations:
animation: moveBus 5s ease-in-out forwards;
-moz-animation: moveBus 5s ease-in-out forwards;
-webkit-animation: moveBus 5s ease-in-out forwards;Here we specify the animation by name, together with a duration and easing property. The “forwards” declaration simply informs the browser not to return to the first keyframe when the animation completes. Do the same for your wheel elements:
/*wheel animation*/
.f_wheel, .b_wheel {
animation: spinWheel 5s ease-in-out forwards;
-moz-animation: spinWheel 5s ease-in-out forwards;
-webkit-animation: spinWheel 5s ease-in-out forwards;
}To ensure that the bus and wheels will move together, we must apply the same animation properties to both types of element, otherwise the wheels will appear to come off the bus!
Define the Animations
Now things get a little messy. The animation syntax is actually very simple, but as with many CSS3 properties we need to use vendor prefixes, so the resulting code is a little lengthy. First define the bus moving animation:
@keyframes moveBus {
from { transform: translateX(0px); }
to { transform: translateX(300px); }
}This is the default version, we will add vendor-specific versions next. The keyframes section has the name we indicated as our animation property for the bus element. We are simply moving the bus along the X axis, so all we need is a start position and end position, which we indicate using translate transforms in the “from” and “to” sections. The browser will apply this transform using the duration and easing properties we specified when indicating the animation for the bus element. Now add the vendor versions:
@-moz-keyframes moveBus {
from { -moz-transform: translateX(0px); }
to { -moz-transform: translateX(300px); }
}
@-webkit-keyframes moveBus {
from { -webkit-transform: translateX(0px); }
to { -webkit-transform: translateX(300px); }
}Now let’s define our wheel spinning and moving animation:
@keyframes spinWheel {
from { transform: translateX(0px) rotate(0deg); }
to { transform: translateX(300px) rotate(2880deg); }
}Again, we use the animation name we specified for the wheel elements. This time we are applying two transforms. The translate transform must be exactly the same as the one we used for the bus or the wheels will not move alongside it. The rotate transform specifies how many degrees we want the wheels to rotate by for the animation as a whole – in this case they will spin 8 times. Add the vendor-specific alternatives:
@-moz-keyframes spinWheel {
from { -moz-transform: translateX(0px) rotate(0deg); }
to { -moz-transform: translateX(300px) rotate(2880deg); }
}
@-webkit-keyframes spinWheel {
from { -webkit-transform: translateX(0px) rotate(0deg); }
to { -webkit-transform: translateX(300px) rotate(2880deg); }
}That’s it! Test your page in a recent version of Firefox, Chrome or Safari to see the effect. The bus should move along the containing element with its wheels turning, speeding up gradually then slowing to a stop.
Conclusion
It’s hard to get too excited about CSS3 animations when the level of browser support is still so low, but a quick look at the properties concerned shows how huge the possibilities are going to be. Rather than using third-party technologies such as Flash, you will be able to use HTML5, CSS3 and JavaScript to build a great level of interaction and stimulation all within your Web page markup.
See this tutorial in action here http://www.developerdrive.com/demo/CSS_first_animations/demo.html
