CSS3 animations introduction

10 August 2011

Creating animations or transitions for hovers in CSS3 is fairly easy. You have to define the way you want your transition to elapse and you'll have to define two states to animate between. The computer does all the hard work by rendering the actual animation for you.

Example: increase the bottom padding on hover.

a.animatedLink {
    padding: 3px 0px 3px 0px;
}
a.animatedLink:hover {
    padding: 0px 0px 6px 0px;
}

This moves the element 3 pixels up on hover, but this happens instantly. Only thing we need to do to enable the animation is to add this to the first class:

a.animatedLink {
    padding: 3px 0px 3px 0px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
a.animatedLink:hover {
    padding: 0px 0px 6px 0px;
}


Instead of "all" you could use "color" or "opacity", etc. "0.2s" is the duration of the transition and "ease" is how the animation elapses. Using ease it gradually slows near the end of the animation. Possible options for easing are linear (constant speed), ease (gradual slowdown), ease-in (speed up), ease-out (slow down) and ease-in-out (speed up and then slow down).

A good, and more in depth article on transitions can be read on Webdesigner Depot.
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

0 comments

Please feel free to be the first to comment on this page!

By placing a comment you let me know i'm doing a good job. It doesn't have to be constructive, just a "awesome!" makes me really happy! You contribute to a better world!