As George pointed out in a previous article, Flash banner ads are on their way out as HTML 5 becomes a the standard for content creation. With Adobe’s future endeavors being powered by HTML 5 instead of flash, today is the perfect day to learn how to use CSS’ powerful animation library. For this set of tutorials, we will create this banner:
CSS Compatibility
While HTML5 will become the official standard, each browser has its own implementation of the css methods. For instance, Webkit based browsers such as Google Chrome and Safari use the prefix -webkit before any of the methods, Mozilla Firefox uses -moz, IE uses -ie, etc. I will only being showing you -webkit, but to get the code to work in all browsers, create -moz, -ie, -opera prefixes for each css action.
Step 1: Create your HTML Skeleton
We are going to create a small skeleton html page that has our banner. For brevity, we will use a fixed width, however, it is entirely possible to create a banner that is dynamic in size.
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="adspace">
<div id="logo"><img src="http://tools.pmg.co/images/pmglogo.png"></div>
</div>
</body>
With the corresponding CSS:
#adspace {
/*center the banner */
margin: 0 auto;
width:750px;
height:150px;
border:1px solid black;
overflow: hidden; /* We don't want the objects to go passed the adspace, nor do we want scroll bars on our banner */
}
The Animation Methods
For this example, we will be using two animation CSS methods, the animation-duration and animation-name. We will also use the transform and translate methods.
#logo {
-webkit-animation-duration: 1s;
-webkit-animation-name:move_logo_inward;
-webkit-transform:translate(10px, 10px);
}
The animation-duration method is pretty self explanatory. It decides how long it takes to run an animation. Note that all these animations are run right when the page loads. The animation-name method will be used later on in this tutorial when we go over keyframes.
Transform is a tricky method. Imagine altering shapes in photoshop. Whenever you click on the shape, you get a bounding box, and a mouse cursor with a “move” command hovering over it. That is exactly what transform does. Using the transform method allows you to skew, distort, bend, and move the object any way you want. For this purpose we want to move the object from point A to point B. The method translate(x,y) does that for us.
Keyframes
Keyframes might be the most important addition of CSS3. It is the reason that animations are so powerful. Keyframes in CSS are exactly like frames are in Adobe Flash CS5, except for when using CSS, the proper method is not to use FPS (frames per second) like in Flash, with CSS, it is more preferable to use percentages.
@-webkit-keyframes move_logo_inward {
0%
{
-webkit-transform: translate(-200px, 10px);
}
100%
{
-webkit-transform:translate(10px, 10px);
}
}
Note that I named this keyframe sequence “move_logo_inward”, and in the previous block, I named the animation-name to be the same. This sets the object to use this keyframe sequence. When using keyframes, the browser will automatically animate from one keyframe to the next.
Put it all Together
This is a good start to understanding HTML5 and CSS3. This code did not use a single line of Javascript, and the outcome is animations that are twice as smooth. In the next segment, we will go over CSS’ new 3D space.
<!DOCTYPE html>
<html>
<head>
<title>PMG HTML 5 Banner</title>
<style type="text/css">
#adspace {
margin: 0 auto;
width:750px;
height:150px;
border:1px solid black;
overflow: hidden;
}
#logo {
-webkit-animation-duration: 1s;
-webkit-animation-name:move_logo_inward;
-webkit-transform:translate(10px, 10px);
}
@-webkit-keyframes move_logo_inward {
from
{
-webkit-transform: translate(-200px, 10px);
}
to
{
-webkit-transform:translate(10px, 10px);
}
}
</style>
</head>
<body>
<div id="adspace">
<div id="logo"><img src="http://tools.pmg.co/images/pmglogo.png"></div>
</div>
</body>
</html>