Урок с практикой по CSS (Онлайн курсы)
Выбрать другой урок из курса
Теория урока

Как сделать плавный переход в 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 корректно работало во всех браузерах, необходимо добавлять специальные приставки (вендорные префиксы). Вот основные:

  1. -webkit- для Chrome, Safari и всех браузеров, написанных на движке WebKit;
  2. -o- для Opera;
  3. -moz- для Firefox;
  4. -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.

<
×
>
Внимание! Впервые на этом сайте?

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Вы можете начать изучение прямо сейчас, кликнув на ссылки: HTML, CSS, JavaScript, C++, PHP, jQuery, Python, Bootstrap 3

Если что-то не нашли, то воспользуйтесь поиском по сайту, который находится на главной странице в самом верху.

Удачи в обучении!

Закрыть окно