Simple Animated Menu using CSS

By using CSS3 transitions you can add a nice little animated effect to a vertical menu. The distance of the animation is controlled by the padding added to the a:hover state.

Basic example HTML

<ul class="button-animate">
<li><a href="#">Hello</a></li>
<li><a href="#">How are you?</a></li>
</ul>


Adding the CSS3 transitions code

.button-animate a {
padding-left:0;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;}

Now the distance of the animation is based upon the left padding applied of 20px

.button-animate a:hover {
padding-left:20px; }

If the browser does not support it then it will just fallback to a normal hover without the animation.

Resources: CSS3 transitions

More complex forms of animation

Live Example

CSS Web Animation Tools, Techniques and Resources