In order to teach myself a little bit about CSS3 animations and transforms I’ve decided to put together a flipping clock countdown to the St. Louis Cardinals opening day. So I’m going to try and create the design above (you’ll notice the repeating 11. I’d say it was a choice during the design to signify the Cardinals National League leading 11 World Series wins, but it wasn’t planned. We’ll just call it a happy coincidence) using CSS3 to control the rotating, style, etc. and jQuery to control the countdown. We’re talking no images here. Luckily I was able to find a great example to learn from at CodePen.
My first step was to do some research on CSS3. I started with A Book Aparts excellent CSS3 for Web Designers. It’s a quick read and gives a lot of practical examples of CSS3 that degrade gracefully. So you can start playing with CSS3 while still supporting older browsers for your clients.
So I’m getting started using HTML5 Boilerplate. It’s a great template to start a website. If you haven’t ever used it before take some time to browse through it and see how it can help you on future projects. I just pulled the index.html, css, and js folders out of the download and used that to get started. That should be all I need for this project.
Step 1:
My first goal was to take a div with the number 1 inside it and flip that thing using CSS3 animations. So I through together this HTML:
<div class="flipthis">1</div>
I then threw in this CSS to control its style and the animation.
.flipthis {
height: 50px;
width: 50px;
background: #ff0000;
animation: flipthis 5s;
color: #fff;
font-size: 40px;
}
@keyframes flipthis {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(180deg);
}
}
So we should have a div with a “1” in it that flips upside down when the page loads. Let’s check it out, and…shit. It doesn’t work. That’s because I’m running Chrome and my rules are missing the vendor prefixes that some of the newer CSS3 rules use. So let’s change that CSS to this:
.flipthis {
height: 50px;
width: 50px;
background: #ff0000;
-webkit-animation: flipthis 5s;
-moz-animation: flipthis 5s;
animation: flipthis 5s;
color: #fff;
font-size: 40px;
}
@-webkit-keyframes flipthis {
0% {
-webkit-transform: rotateX(0deg); /* Safari and Chrome */
-moz-transform: rotateX(0deg); /* Firefox */
transform: rotateX(0deg);
}
100% {
-webkit-transform: rotateX(180deg); /* Safari and Chrome */
-moz-transform: rotateX(180deg); /* Firefox */
transform: rotateX(180deg);
}
}
Now we’ve got a red 50×50 square with a white “1” in it that animates flipping upside down when the page loads. You’ll notice the keyframes rule is only using the -webkit- vendor prefix. If you want it to work for everything and work in the future you’ll need to duplicate it with all the other vendor prefixes, or use a jQuery plugin like -prefixfree that goes in and applies all the prefixes for you. Just include the js file along with the rest and you’ll be good to go. No rewriting the same CSS rules over and over again with different vendor prefixes. For more on why these are necessary check out the A Book Apart book I mentioned earlier.
So now we’ve got a CSS3 transform animation. My next goal is going to be to take the code from the CodePen example and get it working in Coda so I can break it down further and further familiarize myself with CSS3 animation and transforms.
