We’ve been talking a lot about the HTML5 Family lately. Today, we thought we’d have some fun and dive directly into some CSS3 capabilities. In particular, we thought we’d see if you can really duplicate popular Flash ads in HTML5. Well it turns out that you don’t really need HTML5, all you really need are some digital assets and CSS3 animations—which today work in latest revisions of Chrome and Safari. Take a look at three popular Flash ads and compare them to our CSS3 recreations. It’s frankly a little uncanny.

In the rest of the post, we’ll show you how you can go about creating an ad using only CSS3 (and HTML). For simplicity, we will recreate the Flash ad from Hertz that we pulled off the web recently. The ad won’t look exactly the same (e.g. we don’t know the exact fonts and colors that were used) but we’ll be able to make it pretty close.

Click to view the demo and see if you can tell which ad was done in Flash and which was done in CSS3.

You will get most out of this post if you are familiar with the basic WebKit animation properties. For example, you should be able to understand this:

#objectIdToAnimate {
   -webkit-animation-name: slideAnimation;
   -webkit-animation-duration: 10s;
   -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes slideAnimation {
   0%   {    -webkit-transform: translateX(130px);    }
   100% {    -webkit-transform: translateX(0);        }
}

The Ad

The Hertz ad consists of the following main components:

1. Static Elements
2. Animated Text
3. Car
4. Button

Since we are not creating an ad from scratch we will use three images taken from the flash ad (the car, the logos, and the triangle disclosure in the button). The rest will be recreated in HTML and CSS.

Set Up

The ad can be set up several ways. For this ad, we’ll use absolute positioning of all the ad elements. To do this while keeping the page flow, we set the outermost ad container to have a relative positioning. This enables us to use absolute positioning for the ad elements while still placing the ad on the page statically.

We also disable overflow, so elements (such as the car) will not show outside the boundary of the ad.

#adContainer {
   position: relative;
   overflow: hidden;
   ...
}

The ad elements are organized using hierarchical divs with absolute positioning. We assign unique ids to all divs that we want to apply CSS to. Using CSS, we position all elements where they are on the last frame (what you see after the ad has finished running). For anything that is not visible in the last frame, we set the opacity to zero or set the position outside the ad boundary box. This ensures that the ad will display okay in a browser (such as Firefox) that does not support -webkit animations.

HTML structure:

   

       

   

   

       
Pay for standard.

       ...
   


   ...

   

       
AAA Mem...

       

   

Organizing animations

There are several ways to organize CSS animations and the timeline. For this ad we’ll keep it simple by starting all animations on page load and keeping their durations the same (excluding the mouse over animations). This enables us to easily compare different animations when we write the code.

However, it is worth pointing out that this approach might not scale well when the number of animations gets high, since animations run simultaneously.

Text Animation

The text doesn’t move, so all we need to do is to animate the opacity of the text to do the fades.

Here is the first of three animations used (one for each piece of text).

@-webkit-keyframes text1 {
   0%   { opacity: 0; }
   6%   { opacity: 0; }
   8%   { opacity: 1; }
   24%  { opacity: 1; }
   28%  { opacity: 0; }
   100% { opacity: 0; }
}

You might wonder why the opacity style is repeated even when the value doesn’t change. This is because we only want it to be animated between 6 – 8 % and between 24 – 28 %; otherwise we want it to be static.

Car Animation

To simplify the animation, we’ll split it into two separate animations by layering the car in an additional div. One animation to do the bouncing and one animation to slide the car.

CSS3 does not provide any direct way to animate a decaying wave, but we can get a satisfying result by using the default ease-in/out timing function and just define keyframes at the “top” and “bottom” of the bounces.

Here are the CSS keyframes used for the bounces:

@-webkit-keyframes bounceAnimation {
   0%    { -webkit-transform: scale(0.2);  }
   3%    { -webkit-transform: scale(0.57); }
   4.5%  { -webkit-transform: scale(0.42); }
   5.5%  { -webkit-transform: scale(0.50); }
   6%    { -webkit-transform: scale(0.48); }

   25%   { -webkit-transform: scale(0.48); }
   28%   { -webkit-transform: scale(1.2);  }
   29.5% { -webkit-transform: scale(0.9);  }
   30.5% { -webkit-transform: scale(1.05); }
   31.0% { -webkit-transform: scale(1);    }

   100%  { -webkit-transform: scale(1);    }
}

As it stands, this scales the car starting from the center of the image, so we need to add additional styles to the car in order to move the transform origin to the bottom of the car as well as placing the car relative to the bottom side of the ad rather than the top.

-webkit-transform-origin: center bottom;
bottom: 0;

The sliding of the car is simple:

@-webkit-keyframes slideAnimation {
   0%   { -webkit-transform: translateX(-130px); }
   55%  { -webkit-transform: translateX(-130px); }
   66%  { -webkit-transform: translateX(0); }
   100% { -webkit-transform: translateX(0); }
}

Button Animation

We slide the button into the ad in a similar way to how we slide the car in.

Hovering over the button changes a few of its properties. To animate these changes we use the -webkit-transform property. This animates the color change.

To take it a step further, we also want to recreate the moving “shine” effect that the background of the button has. This can in fact also be done using just CSS. First we create a gradient background for the button, and then we move the background.

Just like this:

#button:hover {
   background: -webkit-gradient(
                   linear,
                   left top,
                   right 50,
                   color-stop(0.45, #1D5365),
                   color-stop(0.5,  #338DAD),
                   color-stop(0.55, #1D5365)
               );
   background-position: left top;

   -webkit-background-size: 300px 22px;
   -webkit-animation-name: backgroundShine;
   -webkit-animation-duration: 0.3s;
   -webkit-animation-iteration-count: 1;
   -webkit-animation-timing-function: linear;
}

@-webkit-keyframes backgroundShine {
   0%   { background-position: right top; }
   100% { background-position: left top;  }
}

This working draft of the ad works in newer WebKit browsers (Safari 4, Chrome 5, Mobile Safari). It mostly works in Android although some animations do not behave correctly. It also degrades gracefully in Firefox and IE7+, displaying just the last frame of the animation. It could also degrade gracefully in IE6 by changing the images from PNG to GIF.