Плавный переход. CSS свойство transition
Значения свойства transition управляют плавной сменой свойств при анимации, наведении и клике на любой элемент. CSS свойство transition нацелено на улучшение взаимодействия с пользователем. Сайты с плавно работающими элементами, оставляют приятное впечатление у пользователя, что в свою очередь повышает доверие к вашему бизнесу.
Свойства transition
- transition-duration устанавливает интервал времени, в течении которого одно свойство переходит в другое. По сути transition-duration определяет скорость анимации. Дефолтное значение 0 секунд, поэтому переход происходит резко.
- transition-property указывает на CSS-свойство, к которому будет применяться плавный переход. Допускается указание нескольких свойств через запятую. По умолчанию данное свойство применяется ко всем CSS-свойствам и имеет значение all.
- transition-delay устанавливает время задержки для плавного перехода в секундах или миллисекундах.
- transition-timing-function определяет способ, каким образом будет происходить плавный переход. Значение по умолчанию ease (медленное начало, быстрый разгон в середине и медленное затухание в конце). Кроме ease, существует еще пять сценариев плавного перехода:
ease-in - медленно начинается и плавно ускоряется в конце
ease-out - стремительно начинается и медленно затухает
ease-in-out - медленно начинается и медленно заканчивается
linear - переход сохраняет одинаковую скорость на протяжении всего времени
steps(int,start|end) - разбивает плавный переход на шаги
.elem {
transition-duration: 0.5s;
transition-property: border-radius;
transition-delay: 1s;
transition-timing-function: ease in;
}
В реальной верстке макетов, все-таки чаще всего используют укороченную запись.
.elem {
transition: border-radius 0.5s ease in 1s;
}
Пример перехода цвета
Рассмотрим на примере, как применить CSS-свойство transition в качестве анимационного эффекта при наведении на кнопку.
<div class="button">hover effect</div>
.button {
color: #fff;
background-color: #834b7c;
transition-property: background-color, color;
transition-duration: 1s, 0.5s;
transition-delay: 0.1s, 0.2s;
transition-timing-function: ease, ease-out;
}
.button:hover{
background-color: #c4a7be;
color: #4d1d49;
}
Короткая запись свойства transition:
.button {
transition: background-color 1s ease 0.1s, color 0.5s ease-out 0.2s;
}
Плавный переход по ссылкам
Очень круто смотрится эффект подсвечивания меню навигации при плавном переходе по ссылкам.
<nav>
<a href="#">Home</a>
<a href="#">Pricing</a>
<a href="#">Services</a>
<a href="#">Contact Us</a>
</nav>
nav {
display: flex;
padding: 15px;
background-color: #4d1d49;
}
a {
width: 100px;
border: 1px solid #fff;
border-radius: 10px;
padding: 8px 12px;
text-align: center;
text-decoration: none;
font: bold 12px Verdana;
color: #fff;
background-color: #4d1d49;
transition-property: color, background-color;
transition-duration: 1s;
transition-timing-function: ease-out;
}
a:not(:last-child) {
margin-right: 15px;
}
a:hover,
a:focus {
color: #4d1d49;
background-color: #c4a7be;
}
-
Создано 03.04.2020 10:43:18
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.