When I just finished creating the animated 3d helix, I came up with an idea that would look a lot like that one. Instead of having the flip animation on top of each other, I wanted to have them placed next to each other. This looks a lot like an animation most of you will know; a rotating billboard.

When you only show two images, it would be pretty simple since the CSS would look a lot like the CSS from my previous demo. That’s why I wanted to take it just a little step further and let the billboard show three images.

Take note this demo only works in Safari (tested on a Mac) and Safari for iOS (tested on a iPhone). I’ve made a reference video that you can see below in case you don’t have those browsers.

I know the animation isn’t fully perfect, and I’m not really sure if it’s my piece of code, or the Webkit engine doesn’t properly animate I expect it to. Anyhow, let’s take a look under the hood and see how it works!

Video

Here’s a reference video, displaying the demo page in the latest version of Safari and showing full effect of this demo.

How cool is that! Now let’s see how you can create something like this yourself.

HTML

As always, the HTML isn’t that hard to understand. This is what I came up with.

<ol id="billboard">
   <li><div></div><div></div><div></div></li>
   <li><div></div><div></div><div></div></li>
   <!-- Repeat for each column -->
</ol>

We’re going to use an unordered list with several list items – one for each column. Each colum will have three “sides”: the image containers. Although it isn’t a hard part, it’s crucial to understand before we add the CSS.

CSS

Let’s start off the CSS with some basic stuff and general things before we get to the animation. As usual, I’ve added some comments to make some thing clear.

/* BILLBOARD */
#billboard { list-style:none; }
#billboard li { display:inline; float:left; }
#billboard li div { position:absolute;
   -webkit-backface-visibility: hidden; /* Hide when facing back */
   -webkit-transition-property: -webkit-transform; /* Only animate the transform property */
}

/* BACKGROUND POSITION */
#billboard li:nth-child(1) div { background-position: -0px 0; margin-left:0px }
#billboard li:nth-child(2) div { background-position: -36px 0; margin-left:36px }
#billboard li:nth-child(3) div { background-position: -72px 0; margin-left:72px }
/* Continue for all background positions */

We display the list items next to each other, and add some specific -webkit properties for the animation. We also shift the background position and margin-left for each column, to show the image completely.

Now for the more interesting part: The animation. It isn’t that hard, but you must understand what’s going on. This is what I came up with.

/* ANIMATION */
#billboard li div:nth-child(1) {
   background-image:url("../images/cocktail.png");
   -webkit-animation:rotate 25s linear;
   -webkit-animation-iteration-count: infinite; /* Keep on looping */
}

@-webkit-keyframes rotate {
   0% { -webkit-transform:rotateY(0deg) }
   16.5% { -webkit-transform:rotateY(120deg) }
   33% { -webkit-transform:rotateY(120deg) }
   49.5% { -webkit-transform:rotateY(240deg) }
   66% { -webkit-transform:rotateY(240deg) }
   82.5% { -webkit-transform:rotateY(360deg) }
   100% { -webkit-transform:rotateY(360deg) }
}

Here’s what this piece of CSS does:

1. Set the correct background-image
2. Appy a linear animation for 25 seconds called rotate
3. To rotate keyframes starts rotating the image across the time span
4. From 0 to 16.5%, it rotates, from 16.5 to 33% it pauses and so on
5. Remember: Because of the backface-visibility, the image doesn’t show when facing the other side

This will be applied to the second and third image too, but all with a different starting position. That’s all you need to achieve this effect!

Conclusion and Download

I hope you understand what’s going on here, and learned some more about CSS animation. I’m aware that the animation isn’t perfect, but like I said, I’m not sure if that’s because of my code or if there are some webkit bugs. Feel free to dig in the source and try it out yourself. If you’re looking for a jQuery solution, check out this article on Codrops.

What do you think of this script? Would you like to see more features, and are you going to use it for your next web project? Feel free to share!