Анімація в CSS-1. Прості анімації через transition
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 – задає функцію руху у вигляді кривої Безьє.
Немає коментарів.