Finally a new blog post! I launched the site nearly a month ago and the response to it has been both surprising and a little overwhelming. I’ve had, as of today, over 160,000 page views and my followers on twitter have almost quadrupled. This is a short blog post on how I made some of the fun animations on the site.
As I started my career as a Flash Developer I came to the CSS game pretty late. However, I think it’s been a perfect time to get started as new(ish) CSS3 features such as transition and animation/keyframe are awesome. I used them plentifully on this site.
One of the things people have noticed most about the site is all the little touches such as the twitter bird animation so I’ve just picked out a few of them to talk about here.
Twitter Bird Animation
I’ll start with the one that people seem to love the most – the flying twitter bird you can see when hovering the top right corner of the nav bar. The thing I’m most pleased about with this is that it uses no JavaScript.

This is made possible by CSS3 animation and the sprite sheet shown above. If you haven’t played around with them yet you can read a little about them here.
Below are two examples. The one on the left was my first attempt, I just jumped straight in without thinking and I got the effect you’ll see if you hover the bird. Kind of an obvious mistake. The example on the right uses the step parameter. It took a little searching to find out about step but once I knew about it I got the perfect effect without the need for any JavaScript. Hover the bird on the right to see it in action.
background-image: url(twitter-bird-sprite.png);
display: inline-block;
height: 150px;
width: 150px;
}
.twitter-bird:hover {
animation: fly 0.2s steps(3) 0 infinite;
}
@keyframes fly {
from { background-position: 0 0; }
to { background-position: -450px 0; }
}
Logo Bounce
Next up is my favourite little animation on the site – the bouncy hover state on the logo.
This doesn’t use a sprite sheet and instead simply uses animation and margins to get the effect:
background-image: url(logo.png);
background-repeat: no-repeat;
height: 150px;
margin: 50px;
width: 154px;
}
.logo:hover {
animation-name: bounce;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-iteration-count: 1;
}
@keyframes bounce {
45% {
height: 130px;
margin-top: 70px;
}
55% {
height: 130px;
margin-top: 70px;
}
75% {
height: 170px;
margin-top: 0px;
}
}
Pretty simple right? And again, no JavaScript required here.
Button Hovers
Finally I want to talk about the rolly hover states of the nav buttons. This effect is used a lot at the moment and I personally really like it as it looks slick but gives the user clear feedback of when a button is hovered.
To get this effect on your site requires a little extra markup:
Again all the work is done by CSS3 with no need for JavaScript.
display: inline-block;
height: 60px;
line-height: 60px;
overflow: hidden;
position: relative;
text-align: center;
}
.label {
display: block;
height: 100%;
position: relative;
top: 0%;
transition: top 0.35s;
width: 100%;
}
.button:hover .label {
top: -100%;
}
A full working example of all the code that you can play with and modify can be found here on CodePen.
Thanks for amazing sharing… there are much more nice example that we can use in web projects;;)
23 May 2013Great article!
16 May 2013Thanks for this beautiful post. This post helped me to understand better the keyframes function of CSS.
16 May 2013Wow, very nice exemples. Thank you for ideas.
13 May 2013Useful tips indeed, thanks for sharing with us 🙂
8 May 2013Great article. The simplicity CSS3 offers is great and the old browsers can just go and die. Now if only i.e. 9 and 10 would react correctly!
Check out this twitter animation I spotted at the end of this page. Its done in jquery but I love it!.
http://thecreativeinstitute.ie
19 Apr 2013For the twitter bird animation, you could remove the “from { background-position: 0 0; }” line entirely. It’s simpler.
3 Apr 2013nice animations dude, thanks!
1 Apr 2013For the button, instead of using two spans.
30 Mar 2013I would use this markup :
Button Label
Then apply text-shadow : 0 -60px #fff to emulated the first line.
And line-height : 180px to move the real text to the second line.
On hover, animate the line-height to 60px.
Inspiring
24 Mar 2013The twitter bird dosent work on firefox 🙁 some things just randomly dont work on firefox, even if you include the -moz kit.
I have done some examples here:-
http://testing.labforone.com
Sites really cool btw!
23 Mar 2013Thank you for sharing! The whole site is great – really inspiring.
22 Mar 2013Awesome as f**k!
19 Mar 2013cool ))
17 Mar 2013wow!
16 Mar 2013Really like the way you display CSS3 and how you explain this the easy way!
15 Mar 2013People who share their knowledge are my favorite kind. THANK YOU! 🙂
15 Mar 2013twitter-bird animation not moving in Firefox(Aurora)
11 Mar 2013Your bird is not flying ( FF 19.0, Ubuntu 12.10 ).
8 Mar 2013It would also be great to see a post on how you managed to create the transitions between articles etc.
7 Mar 2013Good Site!!
7 Mar 2013Lowen: your version seems to be more browser-compatible.
6 Mar 2013Nice form field designed with (required) within the field
Is the twitter bird animation not working on iPad ?
6 Mar 2013nice site! and nice little tutorial. For the button I wouldn’t set a class on the span and would only use 1 span and use :before or :after selector. You can still dynamically insert the ‘content’ property of the after by using a data attribute. This would tidy the html markup quite a bit. I adjusted your example: http://www.codepen.io/flowen/pen/uyjrz
3 Mar 2013