Пример хорошей анимации меню на css

CSS стили:

panel { padding-left: 1px; width:192px; list-style:none; padding-top:1px; display:inline-block; } #panel li { background: url("/img/userimages/user_781/back.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0); border: 1px dotted silver; color: #8d8c8b; margin-top: 1px; text-align: left; width: 195px; } #panel li a { color:#fff; display:block; padding: 9px 8px; } #panel li a:hover { color:#fff; } #panel li.animation {-moz-transition: all 0.3s ease-in-out 0s; -moz-transform:translateX(0px); -o-transition: all 0.3s ease-in-out 0s; -o-transform:translateX(0px); -webkit-transition: all 0.3s ease-in-out 0s; -webkit-transform:translateX(0px); } #panel li a.active{ color:#fff; } #panel li.animation { -moz-transition: all 0.3s ease-in-out 0s; -moz-transform:translateX(0px); -o-transition: all 0.3s ease-in-out 0s; -o-transform:translateX(0px); -webkit-transition: all 0.3s ease-in-out 0s; -webkit-transform:translateX(0px); } #panel li.animation:hover { color: aqua; background: #6a6869; -moz-transform:translateX(10px); -o-transform:translateX(10px); -webkit-transform:translateX(10px); -moz-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; -webkit-transition: all 0.5s ease-in-out 0s; }

HTML:

<ul id="panel">
<li class="animation"><a>Постельное белье</a></li>
<li class="animation"><a>Покрывала</a></li>
<li class="animation"><a>Одеяла</a></li>
<li class="animation"><a>Полотенца</a></li>
</ul>