Теория урока

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

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

Код HTML

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

Код CSS

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

.link:hover {
    background: #AAAAAA;
}

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

Код CSS

.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. Чтобы понять, чем они отличаются, попробуйте каждый по очереди. Для упрощения кода эти три строчки можно записать одной. Далее равнозначный пример:

Код CSS

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

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

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

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

Код CSS

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

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

Код CSS

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

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

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

Похожие уроки и записи блога