Анимация в CSS-1. Простые анимации через transition

08.01.2019 | Написал

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 – задаёт функцию движения в виде кривой Безье.
Метки: ,
Комментарии читателей статьи "Анимация в CSS-1. Простые анимации через transition"

Нет комментариев.

Добавить комментарий

Ваш e-mail не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.