CSS Animations on Top10.com

Warning This article was written over six months ago, and may contain outdated information.

As you may be aware I work at Top10.com, and last week we officially moved the site out of beta and released a new design and some revised interactions. We decided that we wanted to make the most of the capabilities of modern browsers, and one of the main ways we did that was with CSS.

As the bulk of our audience use modern browsers we were able to use generated content, web fonts, gradients, transitions and animations to give an enhanced experience for them. You can read more about the front-end build on the Top10 blog, and although I’d be happy to talk through all of it, in this post I’m going to focus on our use of CSS animations.

We’ve used animations in quite a few places across the site, notably on this warning button:

Warning

And also on the main logo (hover to see it animate):

Although both seem different, they actually use the same very simple key frames:

@keyframes top10 {
    from { background-position: 0 50%; }
    to { background-position: 100% 50%; }
}

This just animates the background position from the left to the right, but both examples utilise it in a slightly different way.

The background of the warning button is created from CSS gradients, which create a diagonal candy stripe pattern across a set area:

.warning {
background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.5) 10px, rgba(255,255,255,.5) 16px), linear-gradient(#FFA1A1, #FF4B4B);
background-position: 0 50%;
background-size: 68px 60px;
}

The reason that we used background-size to limit the area is that this is what allows the animation to happen; using just repeating-linear-gradient means that there’s no background position to be animated. As a fallback we provided the same pattern as an image.

The animation controller itself is very simple; it runs for 3 seconds, and repeats infinitely, making the pleasing ‘barber’s pole’ effect:

.warning { animation: top10 3s linear infinite; }

The logo shine effect, as I mentioned above, uses the same keyframes. The image itself is a sprite which has 21 iterations of the logo, and this is animated over half a second, but with the addition of the steps() method:

.logo:hover { animation: top10 500ms steps(20) 1; }

This works somewhat like a Zoetrope or a flip book; the logo sprite is moved from left to right in 20 discrete steps and provides the illusion of animating the shine.

I have to state a debt of gratitude for the inspiration for these effects; I read about steps() in the article Pure CSS3 typing animation with steps() by the brilliant Lea Verou, and the striped button was influenced by Christian Heilmann’s Rainbow Dividers – both came along at exactly the right time for our site build.

5 comments on
“CSS Animations on Top10.com”

  1. Great use of CSS3 new features. I think you could also use HTML5 to make this site even more modern. At least elements like footer, header and section could be used.

    However, I loved the transition at the bottom of the top10.com page, where bubbles come out of the topics. Great work.

  2. I took this a bit further and used CSS Transitions (which I think have a bit better support, although with rapid releases now days it probably doesn’t matter) and layer a DIV over the top of the image. The DIV would then have a CSS gradient background. This eliminates the need for the CSS sprite and allows you to do it all via CSS – http://jsfiddle.net/XQkFC/

  3. @Saeed: That was a consideration, but as IE8 doesn’t support HTML5 elements without JavaScript, it’s not quite at the point where I’d feel comfortable doing that.

    @Neal: We considered this too, but if you look at our logo you see that the shine doesn’t cover the whole of it, so without masking this just wasn’t possible for us.

  4. @Neal G: A few months ago I experimented with various other ways to do the transition-based shine effect without extra markup:

    http://jsfiddle.net/necolas/v4dS8/
    http://jsfiddle.net/necolas/KbNq7/
    http://jsfiddle.net/necolas/fpfZb/

  5. […] CSS Animations on Top10.com – Broken Links Share this:ShareEmailPrintFacebookDiggStumbleUponReddit […]