CSS3 animation effects for menu

Hi there … today I have got some new
tricks to share with you. It’s a CSS transition effect which will make your
work look unique to the users. So here is the stunning effect for you (below is
the look of the effect when placed properly in the website).

The following is the mark-up for a generic
HTML Code place this in your html file where you want the effect :

HTML :-

<ul>

<li>

<a class='list-item' href=''>

<i class='icon-reorder'></i>

</a>

</li>

<li>

<a class='list-item' href=''>

<i class='icon-th-large'></i>

</a>

</li>

<li>

<a class='list-item' href=''>

<i
class='icon-bar-chart'></i>

</a>

</li>

<li>

<a class='list-item' href=''>

<i class='icon-tasks'></i>

</a>

</li>

<li>

<a class='list-item' href=''>

<i class='icon-bell'></i>

</a>

</li>

<li>

<a class='list-item' href=''>

<i class='icon-archive'></i>

</a>

</li>

<li>

<a class='list-item' href=''>

<i class='icon-comment'></i>

</a>

</li>

<li>

<a class='list-item' href=''>

<i class='icon-sitemap'></i>

</a>

</li>

<li>

<a class='list-item' href=''>

<i
class='icon-thumbs-up'></i>

</a>

</li>

<li>

<a class='list-item' href=''>

<i class='icon-tumblr'></i>

</a>

</li>

</ul>

Here is the CSS that you need to call on the html of the effect to
run as you desire.