Css transition (linear, ease)

Властивість CSS Transition потрібен для установки анімаційного переходу з одного стану в інший. Анімація працює за допомогою псевдоелементів: hover і: active. тобто при переході об'єкта з одного стану в інший.

Синтаксис CSS transition

Синтаксис виглядає досить устрошающе, але по факту все просто. Давайте розберемо на простих прикладах як це працює. Після двох прикладів будуть розібрані всі можливі значення кожного з елементу синтаксису:

Приклади з властивістю Transition

Приклад # 1. Анімація в html через transition

На сторінці перетворюється в наступне

Розберемо цей приклад більш докладніше. Властивість transition: all 1s linear відповідає за плавний перехід. Якщо його не писати, то був би різкий перехід. Щоб ви розуміли різницю, нижче представлений приклад без анімаційного ефекту:

Код transition: all 1s linear означає наступне:

  • all - плавне дію застосовується до всіх властивостей, це стосується кольору (color), фону (background). Замість all можна було написати color. тоді плавний перехід поширився б тільки на колір
  • 1s - час протягом якого здійснюється перехід (можна задавати в форматі мілісекунд: 1000ms);
  • linear - об'єкт змінюється з постійною швидкістю (лінійно). Є й інші варіанти ефектів (про них буде розказано трохи нижче)

Щоб всі інші об'єкти не зміщувалися через зростаючого квадрата, можна використовувати властивість властивість transform.

Приклад # 2. Збільшення об'єкта в html без зміщення інших об'єктів

На сторінці перетворюється в наступне

Тепер об'єкт збільшується і не відбувається зміщення інших об'єктів.

Розглянемо детально які значення може приймати кожен з параметрів

Значення властивостей transition

1. Параметр transition-property

Властивість transition-property відповідає за частини властивостей об'єкта, до яких буде застосовано анімація. Може приймати наступні значення

  • all - до всього об'єкту (можна опустити, якщо задано час)
  • color - до кольору тексту
  • background - до кольору фону об'єкта
  • width. height - до зміни габаритів по ширині і висоті відповідно
  • none - анімація відсутня (за замовчуванням стоїть у кожного елемента)

Для включення декількох властивостей, їх можна перерахувати через кому.

2. Параметр transition-duration

Визначає кількість часу протягом якого триває трансформація. Вимірюється в секунда (s) і мілісекундах (ms).

Параметр transition-duration можна задавати окремим властивістю в CSS:

3. Параметр transition-timing-function

Це найважливіший параметр, який визначає як змінюється швидкість трансформації. Наприклад, на початку з замедленінем, або ж в кінці.

Де value може приймати значення:

  • ease (значення за замовчуванням) - уповільнення під час старту і фінішу, рівносильно параметру cubic-bezier (0.25, 0.1, 0.25, 1.0)
  • linear - рівномірна швидкість протягом усього трансформації, рівносильно параметру cubic-bezier (0.0, 0.0, 1.0, 1.0)
  • ease-in - уповільнення на початку, рівносильно параметру cubic-bezier (0.42, 0, 1.0, 1.0)
  • ease-out - уповільнення в кінці, рівносильно параметру cubic-bezier (0, 0, 0.58, 1.0)
  • ease-in-out - уповільнення при старті і в кінці (схожий на ease, але з іншими коефіцієнтами швидкості), рівносильно параметру cubic-bezier (0.42, 0, 0.58, 1.0)
  • step-start - миттєвий старт, рівносильно параметру steps (1, start)
  • step-end - миттєве виконання в кінці, рівносильно параметру steps (1, end)
  • cubic-bezier (a1, b1, a2, b2) - завдання власного зміни швидкості
  • steps (a, b) - зміна ривками

4. Параметр transition-delay

Задає час затримки до початку ефекту переходу. Вимірюється в секундах (s) і мілісекундах (ms)

Приклад # 3. різні затримки

Раніше ми вже говорили про можливість задавати різні затримки для трансформацій. Розглянемо це на прикладі.

На сторінці перетворюється в наступне

Приклад складної трансформації із затримками

Не всі браузери підтримують трансформацію. Необхідно використовувати Вендорний префікси CSS.

  • -ms-transform-origin - для IE9 і старше (молодше дев'ятої версії трансформація не підтримує
  • -webkit-transform-origin - для Chrome, Safari, Android і iOS
  • -o-transform-origin - для Opera до версії 12.10
  • -moz-transform-origin - для Firefox до версії 16.0