If you would like to talk about your project call (02) 4474 5861

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>

Adding the CSS3 transitions code

.button-animate a {
-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

Instinctively creative & thoughtful strategies with result orientated outcomes

Visually communicating effectively with your potential & current customers adds to the good business experience.

BJ2DESIGN combines a wealth of design knowledge with creative business strategies to create result oriented work.

Read More About BJ2DESIGN

creative hand and tools