Іноді виникає необхідність створювати анімації для змін елементів на веб-сторінці з контролем таких параметрів, як швидкість, затримка та тривалість. У таких випадках для виконання цього завдання можна використовувати властивість transition.

Елемент завжди має два стани: початковий та кінцевий. Керувати поведінкою зміни елемента можна за допомогою наступних властивостей:

transition-property: 
transition-duration:  
transition-timing-function: 
transition-delay: 

• transition-property – назва CSS-властивості, яку потрібно анімувати;
• transition-duration – час, протягом якого має змінюватися стан елемента. Вказується у секундах (s) або мілісекундах (ms);
• transition-timing-function – визначає криву швидкості ефекту переходу. Типові значення: ease, linear, ease-in, ease-out, ease-in-out;
• transition-delay – затримка перед початком ефекту переходу. Вказується у секундах (s) або мілісекундах (ms).

Кожну з цих властивостей буде розглянуто далі у цьому курсі.

Примітка

1 секунда = 1000 мілісекунд. Тобто:

• 0.1с = 100мс;
• 2.5с = 2500мс;
• 0.5с = 500мс.

Практика

Наприклад, потрібно додати ефект transition для фону елемента div при наведенні курсора. Завдання:

• Змінити властивість background-color;
• Затримка має становити 0.1 секунди;
• Зміна кольору має тривати 0.3 секунди;
• Для timing-function використовується значення ease-in-out, тобто анімація починається повільно, прискорюється посередині та знову сповільнюється наприкінці.

Наведіть курсор на елемент, щоб побачити результат.

Ми вказали всі властивості, пов’язані з переходами, для елемента div, а для стану hover задали лише ту декорацію, яку хочемо бачити.