Главная->Уроки по css->Плавный переход. CSS свойство transition

Плавный переход. CSS свойство transition

15 Сен в 00:00

Плавный переход. 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; } Демонстрация свойства transition Плавный переход по ссылкам Очень круто смотрится эффект подсвечивания меню навигации при плавном переходе по ссылкам. <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; } Демонстрация свойства transition