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 offi­cial­ly moved the site out of beta and released a new design and some revised inter­ac­tions. We decid­ed that we want­ed to make the most of the capa­bil­i­ties of mod­ern browsers, and one of the main ways we did that was with CSS.

As the bulk of our audi­ence use mod­ern browsers we were able to use gen­er­at­ed con­tent, web fonts, gra­di­ents, tran­si­tions and ani­ma­tions to give an enhanced expe­ri­ence for them. You can read more about the front-end build on the Top10 blog, and although I’d be hap­py to talk through all of it, in this post I’m going to focus on our use of CSS animations.

We’ve used ani­ma­tions in quite a few places across the site, notably on this warn­ing button:

Warn­ing

And also on the main logo (hov­er to see it animate):

Although both seem dif­fer­ent, they actu­al­ly use the same very sim­ple key frames:

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

This just ani­mates the back­ground posi­tion from the left to the right, but both exam­ples utilise it in a slight­ly dif­fer­ent way.

The back­ground of the warn­ing but­ton is cre­at­ed from CSS gra­di­ents, which cre­ate a diag­o­nal can­dy stripe pat­tern 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 rea­son that we used background-size to lim­it the area is that this is what allows the ani­ma­tion to hap­pen; using just repeating-linear-gradient means that there’s no back­ground posi­tion to be ani­mat­ed. As a fall­back we pro­vid­ed the same pat­tern as an image.

The ani­ma­tion con­troller itself is very sim­ple; it runs for 3 sec­onds, and repeats infi­nite­ly, mak­ing the pleas­ing ‘bar­ber’s pole’ effect:

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

The logo shine effect, as I men­tioned above, uses the same keyframes. The image itself is a sprite which has 21 iter­a­tions of the logo, and this is ani­mat­ed over half a sec­ond, but with the addi­tion of the steps() method:

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

This works some­what like a Zoetrope or a flip book; the logo sprite is moved from left to right in 20 dis­crete steps and pro­vides the illu­sion of ani­mat­ing the shine.

I have to state a debt of grat­i­tude for the inspi­ra­tion for these effects; I read about steps() in the arti­cle Pure CSS3 typ­ing ani­ma­tion with steps() by the bril­liant Lea Ver­ou, and the striped but­ton was influ­enced by Chris­t­ian Heil­man­n’s Rain­bow Dividers — both came along at exact­ly the right time for our site build.

5 comments on
“CSS Animations on Top10.com”

  1. Great use of CSS3 new fea­tures. I think you could also use HTML5 to make this site even more mod­ern. At least ele­ments like foot­er, head­er and sec­tion could be used. 

    How­ev­er, I loved the tran­si­tion at the bot­tom of the top10.com page, where bub­bles come out of the top­ics. Great work.

  2. I took this a bit fur­ther and used CSS Tran­si­tions (which I think have a bit bet­ter sup­port, although with rapid releas­es now days it prob­a­bly does­n’t mat­ter) and lay­er a DIV over the top of the image. The DIV would then have a CSS gra­di­ent back­ground. This elim­i­nates the need for the CSS sprite and allows you to do it all via CSS — http://jsfiddle.net/XQkFC/

  3. @Saeed: That was a con­sid­er­a­tion, but as IE8 does­n’t sup­port HTML5 ele­ments with­out JavaScript, it’s not quite at the point where I’d feel com­fort­able doing that.

    @Neal: We con­sid­ered this too, but if you look at our logo you see that the shine does­n’t cov­er the whole of it, so with­out mask­ing this just was­n’t pos­si­ble for us.

  4. @Neal G: A few months ago I exper­i­ment­ed with var­i­ous oth­er ways to do the tran­si­tion-based shine effect with­out extra markup:

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

  5. […] CSS Ani­ma­tions on Top10.com – Bro­ken Links Share this:ShareEmailPrintFacebookDiggStumbleUponReddit […]