Плавная анимации элемента на сайте с помощью CSS

Для плавной анимации любого элемента на сайте:

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;
}