Анимация в CSS-1. Простые анимации через transition
CSS позволяет нам анимировать элементы на вебстранице. Это могут быть как простые анимации, так и более сложные. И тут есть нюансы, в которых надо бы разбираться. Начнем с азов.
В первую очередь за CSS-анимацию отвечает такое свойство как transition, которое задает плавное изменение других свойств элемента на веб-странице. Таких, например, как цвет, масштаб, отступы и т.д. Список свойств, доступных для анимирования, можно посмотреть, например, тут.
Нельзя анимировать, например:
- background-image
- border-image
- display
В свою очередь, transition является краткой записью четырех других свойств:
- transition-property – свойство, к которому применяется анимация. Можно указывать конкретное свойство, а можно просто all;
- transition-duration – время в секундах или миллисекундах длительности анимации;
- transition-timing-function – быстрота изменения на всем протяжении анимации. Ниже я распишу значения подробнее;
- transition-delay – время ожидания перед запуском эффекта перехода.
и схематично выглядит вот так:
transition = [ transition-property || transition-duration || transition-timing-function || transition-delay ]
например, вот так можно задать переход для положения элемента от верха родительского блока (top):
-webkit-transition: top 1s ease-out 0.5s; -moz-transition: top 1s ease-out 0.5s; -o-transition: top 1s ease-out 0.5s; transition: top 1s ease-out 0.5s; |
И да, префиксы все еще нужны.
Теперь покажу, как это можно использовать на примере наиболее частого анимационного эффекта – анимации фона по наведению (ховеру).
See the Pen animation background for hover by molodezky (@molodezky) on CodePen.0
Т.е. изначально задаем элементу, в данном примере button, голубой цвет фона и transition. Далее указываем черный фон, который должна принимать кнопка по наведению. В результате имеем плавную смену по наведению.
В общем-то, все более менее просто, но позволяет очень неплохо «оживлять» веб-страницы.
Напоследок, список свойств, которые может принимать transition-timing-function:
- ease – начинается медленно, затем ускоряется и к концу движения опять замедляется. Аналогично cubic-bezier(0.25,0.1,0.25,1);
- ease-in – медленно начинается, к концу ускоряется. Аналогично cubic-bezier(0.42,0,1,1);
- ease-out – начинается быстро, к концу замедляется. Аналогично cubic-bezier(0,0,0.58,1);
- ease-in-out – начинается и заканчивается медленно. Аналогично cubic-bezier(0.42,0,0.58,1);
- linear – одинаковая скорость от начала и до конца;
- step-start – как таковой анимации нет. Стилевые свойства сразу же принимают конечное значение;
- step-end – как таковой анимации нет. Стилевые свойства находятся в начальном значении заданное время, затем сразу же принимают конечное значение;
- steps – ступенчатая функция, имеющая заданное число шагов. Пример – steps(5, end);
- cubic-bezier – задаёт функцию движения в виде кривой Безье.
Нет комментариев.