Анімація CSS. Введення + властивість transition

Всім привіт. Нещодавно натрапив на серію дуже корисних і цікавих відеоуроків на тему «CSS анімація». Але ось невдача, всі відео були на англійській мові, а, напевно, не кожен верстальник знає англійську на достатньому рівні, щоб зрозуміти і засвоїти всю необхідну інформацію. Тому я вирішив перевести для вас ці уроки (точніше зробити вільний переклад). Не варто дякувати. Отже:

  1. CSS анімація. Введення + властивість transition (ця стаття)
  2. CSS анімація. Кейфрейми (keyframes) – скоро буде
  3. Коли і навіщо використовувати CSS анімації? – скоро буде

Що таке CSS анімація?

Перед тим, як розповісти вам, як робити CSS анімації, і навіщо вони взагалі потрібні, я б хотів для початку пояснити вам, що таке CSS анімація, дати визначення чи що.

Анімації в інтернеті переслідують дві основні ідеї. Перша ідея – оживити щось. Ви ніби доктор Франкенштейн. У вас є неживий монстр, і ви вдихаєте в нього життя. Друга – візуалізація руху. І ключове слово тут саме «рух».

Як анімувати?

В CSS є два основні інструменти за допомогою яких ми можемо переміщати елементи по веб-сторінці. Перший (про який ми ще поговоримо сьогодні) – властивість transition. В першу чергу саме з його допомогою ми створюємо анімації в CSS. Другий інструмент – це властивість animation в парі з кейфреймамі (@keyframes – ключові кадри). Цей інструмент ми більш детально зупинимося в наступному уроці, а прямо зараз ми розглянемо властивість CSS transition. І ще потім ми поговоримо про те, що потрібно анімувати на сторінці (коли це потрібно користувачеві), а що не варто анімувати (коли анімація виглядає тупо і недоречно), грунтуючись на призначеному для користувача досвід (UX – user experience).

Властивість CSS transition – параметри і значення

синтаксис

Для початку, давайте подивимося, як читається це властивість, і розберемо його синтаксис. Ми пишемо це властивість приблизно так:

transition: [властивість] [тривалість] [таймінг функція] [затримка];

transition: height 1s ease-out 0.2s;

Ми присвоюємо це властивість того елементу, який ми хочемо анімувати. Цей елемент отримує плавний перехід (Або покроковий) між декількома своїми станами (наприклад, висота 100 пікселів і висота 200 пікселів). І то, як буде виглядати цей перехід (З англ. Transition), буде залежати від параметрів, які ми йому поставимо.

Першим параметром (значенням) властивості transition є інше властивість аніміруемого елемента (наприклад, height).

Другим параметром є тривалість (тривалість) анімації, тобто, скільки часу займе перехід елемента з одного стану в інший (наприклад, 2s або 2000ms).

Третій параметр – це таймінг функція [Timing function] (Ізинга функція [easing function]). Те, як інтенсивність анімації розподілиться на протязі всього часу. Наприклад, анімація може різко початися, а під кінець сповільнитися і плавно закінчити перехід. Можуть використовуватися як ключові слова (наприклад, ease, ease-in-out, linear), Так і функції кубика Безьє (наприклад,  cubic-bezier (0.17, 0.67, 0.83, 0.67)). Кубик Безьє ви можете легко і зручно налаштовувати на цьому ресурсі http://cubic-bezier.com, а також функція steps для того, щоб створити покадровую анімацію (покрокову).

Ну і нарешті, параметр затримка. Затримка анімації – це час, який необхідно почекати, перш ніж анімація (в нашому випадку – перехід) почнеться.

Приклад анімації CSS transition

Давайте розглянемо такий приклад CSS анімації:

transition: opacity 300ms ease-in-out 1s;

Тут ми анімуємо тільки властивість opacity (Непрозорість). Це означає, що якщо у елемента, який ми збираємося анімувати, є й інші властивості, наприклад, висота, ширина або колір, і навіть, якщо ці властивості відрізняються в різних станах елемента, то плавний перехід (анімація) буде тільки у властивості opacity. Розумієте?

Замість конкретного властивості можна використовувати також ключове слово «all». Це означає, що ми анімуємо абсолютно все властивості елемента, які були змінені в новому стані елемента (а не тільки opacity), і які взагалі можна анімувати. Тому що, як вам відомо, не всі властивості можна анімувати. Але про це трохи пізніше.

Другий параметр (300ms) Говорить нам про те, що анімація триватиме лише 300 мілісекунд. Тобто елемент швидко з’явиться або швидко розчиниться, в залежності від значень властивостей в двох його станах.

Таймінг функція (ease-in-out) Третім параметром зробить початок і кінець анімації більш плавними.

затримка (1s) Показує на скільки повинна запізнитися анімації перед її спрацьовуванням.

В общем-то, це і є формула того, як ми будемо записувати transition анімацію. Це синтаксис. Ви, якщо що, можете додавати більше ніж один перехід [властивостей] для одного елемента. Наприклад, ви можете анімувати з різними параметрами зміна висоти і ширини елемента. Для цього у властивості transition замість крапки з комою в кінці ставте просто кому і пишіть параметри для ще однієї властивості. І не забудьте потім поставити крапку з комою в кінці, щоб все запрацювало.

Що можна анімувати в CSS?

Поки ми тільки обговорили синтаксис властивості transition. Тепер давайте поговоримо про властивості, які з них ми можемо анімувати, а які ні. Тому що є деякі речі, які просто не має сенсу анімувати, а деякі властивості анімувати просто неможливо.

Аніміруемие властивості

Взяти, наприклад, такі властивості, як:

  1. font-size;
  2. background-color;
  3. width;
  4. left (на яку відстань від лівого боку елемент може бути переміщений [позиційований] …

Очевидно, анімувати ці властивості має сенс. Якщо ви зміните їх значення, це змінить елемент візуально. Якщо ви зміните розмір шрифту, скажімо, з 14 до 28 пікселів, ви побачите, що шрифт плавно збільшився, сталася анімація, яка тривала якийсь час. Анімація завжди має сенс, якщо значення властивостей це чіткі (найчастіше числові) значення. Якщо ви збільшите розмір шрифту до 100 пікселів, то ви явно побачите, як букви ростуть. Плавна зміна кольору фону також можна поспостерігати [тому що колір в інтернеті має числовий код, наприклад, червоний rgb (255,0,0)]. Ці властивості є аніміруемимі.

Взагалі запам’ятайте, якщо ви уявити, що це анімується – значить це можна анімувати. Найчастіше це працює.

Чи не аніміруемие властивості

А ось список властивостей, які не можна анімувати (приклад):

  1. display;
  2. font-family;
  3. position …

Це деякі з них, які я взяв як приклад для того, щоб ви могли відчути різницю між аніміруемимі і не аніміруемимі властивостями CSS.

Візьмемо display. Чи можете ви уявити, як візуально буде відбуватися зміна між «display: block; » і «display: inline-block;»? Як може плавно змінитися зовнішній вигляд елемента між «position: relative;»І«position: absolute;»? Ні, звичайно ж, елемент буде виглядати інакше при зміні цих властивостей. Але як ви можете уявити собі перехід? Ви не можете цього зробити. Вірно? Ви не можете уявити собі перетворення шрифту Helvetica в шрифт Georgia, кожної букви, це просто не спрацює. Ви можете змінити ці шрифти, але вони різко зміняться, ніякої анімації не відбудеться.

Продуктивність анімації в CSS

Загалом, багато властивостей анімуються, але деякі – ні. Тепер давайте вирішимо, які з аніміруемих властивостей краще підходять для анімації, а які гірше. Йтиметься про продуктивність. Ми торкнулися теми продуктивності, тому що анімації це ресурсномісткий процес.

Загалом ось речі, які найбільш добре підходять для анімації:

  1. Позиціонування на сторінці
  2. масштабування
  3. обертання
  4. прозорість

Причому, перші три пункти цього списку, це все параметри властивості transform (translate, scale, rotate). Позиціонування відбувається по осях X і Y.

Якщо ви вирішите анімувати ще що небудь, ви ризикуєте не отримати м’який і плавний перехід 60 кадрів в секунду. Paul Lewis Irish

А це саме те, що нас цікавить, коли ми говоримо про продуктивність анімації. Загалом, самі відповідні властивості для анімації це transform і opacity. При анімації чого або іншого, fps анімації може впасти набагато нижче 60fps.

Давайте резюмуємо цей пункт наступним. Намагайтеся уникати перемальовування елементів на веб сторінці і анімації елементів, які браузеру складно отрендеріть (наприклад, тіні).

Як зробити анімацію в CSS?

Тепер давайте розберемося, як же запустити анімацію. Що потрібно зробити, щоб елемент почав анімовані. Іншими словами, як зробити анімацію в CSS.

Це не складно і для цього є багато різних способів. Але є 2 основних, які ви повинні освоїти в обов’язковому порядку. Перший спосіб – це анімація при наведенні на елемент (псевдоклас: hover). Ви наводите курсор миші на елемент, і спрацьовує анімація. Таким чином можна анімувати сам елемент або будь-який з його дочірніх елементів. Потім я покажу вам, як це працює. Другий спосіб – це зміна класу елемента. Тобто у вас є звичайний елемент, ви міняєте (або додаєте) його клас на клас, який має зовсім інші стилі. Якщо додати клас відбудеться анімація, і якщо прибрати клас, відбудеться зворотна анімація. Це хороший спосіб для анімації меню або випадаючих списків.

Післямова

Ми розглянули всі, що нам потрібно для створення анімації на чистому CSS. Зовсім скоро ми розберемо практичні приклади, а трохи пізніше – дуже цікаві приклади.

Ссылка на основную публикацию