CSS переходи та анімації. Модуль траєкторії руху CSS

До появи CSS3 за слова «анімація» верстальників кидало в холодний піт. А все тому, що в ті часи зробити якісну та гарну анімацію було не тривіальним завданням. CSS цього робити не вмів, тому всі анімації робилися на JavaScript. Потрібно було перелопатити купу форумів, знайти таких же товаришів по нещастю, витратити багато часу на розробку, а в результаті почути від дизайнера: «Гаразд, зійде і так». І коли нарешті вийшов CSS3, феєрверки не припинялися до ранку, а шампанське лилося річкою. Це був знаменний день для всіх web-розробників (наступний такий день був, коли Microsoft оголосила про припинення підтримки Internet Explorer). З приходом CSS3 багато раніше складних завдань перетворилися на прості та приємні для роботи. Це ж стосується анімацій у CSS, про які я розповім у цій статті.

CSS transitions

CSS transitions дозволяють зробити зміни CSS-властивостей плавно та протягом деякого часу. Таким чином ви отримуєте можливість контролювати процес переходу елемента від одного стану до іншого. Почнемо з найпростішого прикладу та продовжимо далі.

При наведенні курсору на квадрат плавно змінюється колір тла.

Тепер докладніше розглянемо, як керувати переходами в CSS. У нас на озброєнні є всього 5 властивостей, які дають змогу контролювати transition-анімацію:

• transition-property;
• transition-duration;
• transition-timing-function;
• transition-delay;
• transition;

transition-property — вказує список властивостей, які анімуватимуться; властивості, які тут не вказані, змінюватимуться звичайним чином. Можна анімувати всі властивості конкретного елемента, вказавши значення all. Якщо ви не вказали жодних властивостей, то за замовчуванням використовується значення all.

Приклад:

transition-property: width;

transition-duration — задає значення тривалості анімації, час можна вказувати в секундах або мілісекундах.

Приклад:

transition-duration: 1s;

transition-timing-function — тимчасова функція, що вказує точки прискорення та уповільнення за певний період часу для контролю зміни швидкості анімації. Простіше кажучи, за допомогою цієї якості можна вказати поведінку для анімації. Наприклад, ми можемо прискорити анімацію на початку та сповільнити наприкінці, або навпаки. Для того, щоб задати процес анімації використовуються криві Безьє. Взагалі transition-timing-function дозволяє зробити дуже багато різних поведінок для анімацій, це ціла тема для статті, тому тут ми не заглиблюватимемося.

Приклад:

transition-timing-function: cubic-bezier(0, 0, 1, 1);

transition-delay — задає затримку часу до початку анімації, можна вказувати в секундах або мілісекундах.

Приклад:

transition-delay: 500ms;

transition — це загальна властивість, яка дозволяє перерахувати перші чотири властивості в порядку: property, duration, timing-function, delay.

Приклад:

transition: background-color 1s cubic-bezier(0, 0, 1, 1) 500ms;

У нас вийшла така проста анімація: при наведенні мишкою на квадрат змінюється ширина; тривалість анімації одна секунда; анімація відтворюється за лінійною функцією; затримка перед початком анімації 500 мілісекунд.

За допомогою CSS transitions можна анімувати майже всі властивості та створювати багато цікавих, красивих, функціональних і навіть складних анімацій, які будуть доповнювати та покращувати ваш проєкт. Наприклад, я зробив такий Material-FAB на чистому CSS, використовуючи transitions:

CSS animations

CSS animations дозволяють робити більш складні анімації, ніж CSS transitions. Весь секрет @keyframes. Правило @keyframes дозволяє створювати анімацію за допомогою набору ключових кадрів, тобто описує стан об'єкта у певний час. Давайте розглянемо простий приклад.

Наше коло ожило і воно ніби пульсує.

Є 9 властивостей, які дозволяють контролювати CSS animations:

• animation-name;
• animation-duration;
• animation-timing-function;
• animation-delay;
• animation-iteration-count;
• animation-direction;
• animation-play-state;
• animation-fill-mode;
• animation;

animation-name — тут вказується ім'я анімації, яке пов'язує правило @keyframes із селектором.

Приклад:

animation-name: my-animation;

@keyframes my-animation {
     0% { opacity: 0; }
     100% { opacity: 1; }
}
             

animation-iteration-count — задає кількість повторів анімації, значення за промовчанням 1. Значення infinite означає, що анімація програватиметься нескінченно.

Приклад:

animation-iteration-count: 2;

animation-direction — задає напрямок анімації.

Приклад:

animation-direction: reverse;

animation-play-state — ця властивість керує зупинкою та програванням анімації. Є два значення, running (анімація програється, за замовчуванням) та paused (зупиняє анімацію).

Приклад:

animation-play-state: paused;

animation-fill-mode — встановлює, які CSS-властивості будуть використані до об'єкта до або після анімації. Може набувати таких значень:

• none — анімовані CSS-властивості застосовуються до об'єкта лише під час відтворення анімації, після закінчення об'єкт повертається у вихідний стан;
• forwards — анімовані CSS-властивості застосовуються до об'єкта після відтворення анімації;
• backwards — анімовані CSS-властивості застосовуються до об'єкта до початку відтворення анімації;
• both — анімовані CSS-властивості застосовуються до об'єкта і до початку, і після відтворення анімації;

Приклад:

animation-fill-mode: backwards;

Властивості animation-duration, animation-timing-function, animation-delay працюють так само, як аналогічні властивості в CSS transitions, про яких я писав раніше, тому не повторюватимуся.

За допомогою animations CSS можна створювати досить складні анімації без використання JavaScript. Яскравий приклад — це лоадер, тобто елементи, які показують, що на вашій сторінці щось завантажується. Ось кілька прикладів:

Модуль траєкторії руху

Модуль траєкторії руху CSS дозволяє створювати рух об'єктів за контуром через спеціальну властивість motion-path. Раніше таку анімацію можна було зробити лише за допомогою SVG чи складних скриптів.

У цій специфікації є 3 властивості:

• motion-path;
• motion-offset;
• motion-rotation;

motion-path — це властивість дозволяє вказати точки (координати) за якими рухатиметься об'єкт. Синтаксис такий самий як SVG-атрибут path.

Приклад:

motion-path: path('M 235,323 Q 412,440 365,615 Q 400,300 670,240 L 870,340 L 975,535 Q 730,600 630,535 z');

motion-offset — це властивість приводить об'єкт у рух від початкової точки до кінцевої. Воно набуває або подвійне значення довжини, або відсотки. Щоб об'єкт почав рухатися, потрібно визначити анімацію, яка йтиме від 0 до 100%.

Приклад:

@keyframes airplane-fly {
     0% { motion-offset: 0; }
     100% { motion-offset: 100%; }
}

motion-rotation — це властивість дозволяє вказати, якою стороною вперед рухатиметься об'єкт. Можна вказати auto, reverse або своє значення у градусах ('-45deg', '30deg' тощо).

Приклад:

motion-rotation: auto;

На жаль, motion-path поки що підтримується тільки в Chrome та Opera, але сподіватимемося, що решта браузеров незабаром візьмуть з них приклад, адже штука справді корисна.

Для тих, хто ще не зрозумів, як це працює, або хоче краще з цим розібратися, я зробив приклад (посилання на codeopen).