純CSS動畫選單

CSS3真是好玩的東西，這是純CSS3做的選單動畫，可以把source code copy回去就可以用了。

準備類似下面的結構
<ul id="panel">
<li><h3>MENU</h3></li>
<li class="animation"><a href="#">Link 1</a></li>
<li class="animation"><a href="#">Link 2</a></li>
<li class="animation"><a href="#">Link 3</a></li>
<li class="animation"><a href="#">Link 4</a></li>
<li class="animation"><a href="#">Link 5</a></li>
</ul>

寫法也很簡單，加一下transform

view plaincopy to clipboardprint?

1. transition: all 0.4s ease-in-out;   

然後設滑過去後讓他動起來。

view plaincopy to clipboardprint?

1. transform:translateX(25px);  

其他大同小異，研究一下原始碼就知道了。

Demo