Для плавной анимации любого элемента на сайте:
1) В первую очередь должна быть грубая анимация. Это может быть, например, изменение внешнего вида элемента сайта при наведении, в стиле прописывается как:
.myclass:hover { color: red; }
2) А в css для плавного перехода в 0,5 секунд надо вставить вот это:
-webkit-transition: All 0.5s ease; -moz-transition: All 0.5s ease; -o-transition: All 0.5s ease; -ms-transition: All 0.5s ease; transition: All 0.5s ease;
3) В итоге это будет выглядеть примерно так:
.myclass:hover { color: red; -webkit-transition: All 0.5s ease; -moz-transition: All 0.5s ease; -o-transition: All 0.5s ease; -ms-transition: All 0.5s ease; transition: All 0.5s ease; }