149. Как сделать плавный переход в CSS

Когда пользователь наводит курсор на объект или нажимает на него, псевдокласс hover срабатывает мгновенно. Чтобы как-то сгладить переход, необходимо использовать анимацию. Приведем простой пример ссылки:

<a href = "/" class = "link">Ссылка</a>   

.link {
    padding: 10px 20px;
    background: #F1F1F1;
    color: #000;
}

.link:hover {
    background: #AAAAAA;
}    

Теперь сгладим переход цвета фона при наведении курсора на ссылку. Для этого будем использовать три свойства: transition-property, transition-duration и transition-timing-function. Первое указывает на свойство, к которому мы применяем переход. Второе указывает продолжительность перехода. Третье указывает скорость перехода, в зависимости от времени.

.link:hover {
    background: #AAAAAA;
    transition-property: background;
    transition-duration: 1s;
    transition-timing-function: ease;
}    

В нашем примере устанавливается переход для свойства background, длительностью 1s и с временной функцией ease. Если необходимо установить плавный переход для всех свойств, то замените конкретное свойство на all, то есть таким образом: transition-property: all.

Теперь рассмотрим значения, которые может принимать свойство transition-timing-function. Достаточно тяжело описать работу каждого значения, поэтому просто их перечислю: ease, linear, ease-in, ease-out, ease-in-out и cubicbezier. Чтобы понять, чем они отличаются, попробуйте каждый по очереди. Для упрощения кода эти три строчки можно записать одной. Далее равнозначный пример:

.link:hover {
    background: #AAAAAA;
transition: background 1s ease;
}    

Приведенные ранее примеры небыли кроссплатформенными. Чтобы свойство transition корректно работало во всех браузерах, необходимо добавлять специальные приставки (вендорные префиксы). Вот основные:

1. -webkit- для Chrome, Safari и всех браузеров, написанных на движке WebKit;
2. -o- для Opera;
3. -moz- для Firefox;
4. -ms- для браузеров Microsoft.

Используются они следующим способом:

-webkit-transition: background 1s ease;
-o-transition: background 1s ease;
-moz-transition: background 1s ease;
-ms-transition: background 1s ease;    

Кстати, в свойстве transition можно перечислять значения через запятую, например, вот так:

transition: background 1s ease, color 2s linear;    

Возможно, кто-то задается вопросом, почему бы не использовать JavaScript? Использовать его можно, но зачем усложнять себе жизнь, когда имеется возможность решить задачу средствами CSS.

Похожие уроки Codebra

1. Сделайте более плавный переход, используя свойство transition.

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.