CSS-переходи
CSS-переходи (transitions) - це механізм, який дозволяє плавно змінювати стилі елементів під час зміни їх стану. Наприклад, коли користувач наводить курсор миші на елемент, можна змінювати його кольори, розміри або інші властивості плавно, замість миттєвого змінювання стилів.
У CSS-переходах є всього два стани: початкове і кінцеве значення властивості. Для складніших ефектів використовують CSS-анімацію.
CSS-переходами керують за допомогою таких властивостей:
transition-property: властивість_пеерходу;
transition-duration: тривалість_переходу;
transition-timing-function: часова_функція_переходу;
transition-delay: тривалість_затримки;Властивість transition-property
Властивість transition-property вказує, яка властивість або властивості повинні бути анімовані (переходити плавно) під час зміни стану елемента. Ця властивість дозволяє контролювати, які атрибути елемента повинні бути анімовані при спрацьовуванні подій, таких як наведення курсору чи зміна фокусу.
Значенням може бути одна властивість або список властивостей через кому. За замовчуванням значення all - будуть анімовані всі можливі властивості.
transition-property: property1, property2 ...;тут property1, property2, ... - назви властивостей CSS, які повинні бути анімовані.
Наприклад, якщо треба анімувати зміну кольору тла (background-color) та розмір (width) елемента при наведенні курсору.
Властивість transition-duration
Властивість transition-duration вказує тривалість часу, протягом якого повинна відбутися анімація зміни стилів властивостей, які були задані за допомогою властивості transition-property. Ця властивість вказує, скільки часу потрібно для зміни стану властивостей з їх поточних значень на нові значення. Якщо цю властивість не вказано, то перехід відбувається миттєво. Значення можна задавати у мілісекундах: 250ms, 3000ms або в секундах: : 0.25s, 3s.
transition-duration: time;тут time - тривалість анімації в секундах (s) або мілісекундах (ms).
Якщо різні властивості мають різні значення часу переходу, то їх треба перерахувати через кому.
Властивість transition-timing-function
Властивість transition-timing-function визначає графік, за яким анімація переходу відбувається від початкового значення до кінцевого значення. Ця властивість дозволяє вказати, яким чином зміни значень властивостей будуть плавно відбуватися протягом періоду, вказаного за допомогою transition-duration.
Існує декілька можливих значень для властивості transition-timing-function:
ease (за замовчуванням): Починає повільно, збільшує швидкість посередині анімації та повільно сповільнює в кінці. Це забезпечує плавний і природний ефект анімації.
linear: Анімація відбувається зі сталою швидкістю протягом всього періоду.
ease-in: Анімація починається повільно та збільшує швидкість в кінці.
ease-out: Анімація починається швидко та сповільнюється в кінці.
ease-in-out: Анімація починається повільно, збільшує швидкість всередині та сповільнюється в кінці.
cubic-bezier(n,n,n,n): Дозволяє визначити власну криву таймінгу за допомогою значень n, які лежать в діапазоні від 0 до 1.
.element {
width: 200px;
height: 200px;
background-color: #3498db;
color: white;
text-align: center;
line-height: 200px;
transition-property: background-color, width;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); /* Власна крива таймінгу */
}
.element:hover {
background-color: #e74c3c;
width: 300px;
}Функція Cubic-Bezier
За допомогою функції розподілу часу Cubic-Bezier можна описати кастомну швидкість переходу властивості від одного значення до іншого.
Є багато видів функцій розподілу часу базованих на функціях Безьє. Для охочих дізнатися про них більше можна почитати тут.
Властивість transition-delay
Властивість transition-delay визначає часовий інтервал перед початком виконання анімації зміни стилів, яку ви встановили за допомогою властивостей transition-property, transition-duration, та transition-timing-function.
transition-delay: time;тут time - тривалість затримки вказується в секундах (s) або мілісекундах (ms).
Короткий запис CSS-переходу
Короткий запис CSS-переходу (CSS transition shorthand) дозволяє встановлювати одразу всі параметри переходу за допомогою однієї властивості transition. Це спрощує і покращує читабельність коду, оскільки всі параметри переходу розміщуються в одному місці.
transition: property duration timing-function delay;property: Властивість чи властивості CSS, які повинні бути анімовані.
duration: Тривалість анімації вказується в секундах (s) або мілісекундах (ms).
timing-function: Функція плавності анімації.
delay: Затримка перед початком анімації, вказується в секундах (s) або мілісекундах (ms).
Можна зазначити більше однієї властивості анімації, розділяючи їх комами:
transition: property1 duration1 timing-function1 delay1,
property2 duration2 timing-function2 delay2;Функцію плавності анімації та затримку можна не вказувати, тоді їх значення будуть застосовані за замовчанням.
transition: background-color 500ms ease-in, border-radius 500ms ease-out;Сценарії з transition-delay
transition-delay використовується для встановлення затримки перед початком анімації для властивостей, які вказані в transition-property. Ця властивість може бути корисною для створення послідовних анімацій, коли треба, щоб різні властивості анімувалися з різними затримками.
transition: background-color 0.5s ease 0s,
color 0.5s ease 0.5s,
border-radius 0.5s ease 1s;Покликання:
Функція розподілу часу cubic-bezier
Last updated