CSS Переходи
CSS Переходи
CSS-переходи дозволяють плавно змінювати значення властивостей протягом заданого періоду часу.
Наведіть курсор на елемент нижче, щоб побачити ефект CSS переходу:
В цьому розділі ви дізнаєтесь про наступні властивості:
transitiontransition-delaytransition-durationtransition-propertytransition-timing-function
Браузерна підтримка переходів
Числа в таблиці вказують першу версію браузера, яка повністю підтримує властивість.
| Властивість | |||||
|---|---|---|---|---|---|
| transition | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-delay | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-duration | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-property | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-timing-function | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
Спеціальні браузерні префікси
Деяким старим браузерам потрібні спеціальні префікси (-webkit-), щоб зрозуміти властивості transition:
Приклад
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari до 6.1 */
transition: width 2s;
}
Спробуйте самі »
Як використовувати CSS-переходи?
Щоб створити ефект переходу, необхідно вказати дві речі:
- CSS властивість, до якої ви хочете додати ефект
- тривалість ефекту
Примітка: Якщо частина тривалості не вказана, перехід не буде мати ніякого ефекту, оскільки значення за замовчуванням дорівнює 0.
В наступному прикладі показано червоний елемент <div> розміром 100px * 100px. Елемент <div> також визначив ефект переходу для властивості width з тривалістю 2 секунди:
Приклад
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
Ефект переходу почнеться, коли вказана CSS властивість (width) змінить значення.
Тепер давайте задамо нове значення для властивості width, коли користувач наводить курсор на елемент <div>:
Зверніть увагу, що коли курсор миші виходить за межі елемента, він поступово повернеться до свого початкового стилю.
Змініть кілька значень властивостей
В наступному прикладі додається ефект переходу для властивостей width та height з тривалістю 2 секунди для width (ширини) та 4 секунди для height (висоти):
Вкажіть криву швидкості переходу
Властивість transition-timing-function задає криву швидкості ефекту переходу.
Властивість transition-timer-function може мати наступні значення:
ease- визначає ефект переходу з повільним початком, потім швидким, а потім повільним завершенням (за замовчуванням)linear- визначає ефект переходу з однаковою швидкістю від початку до кінцяease-in- визначає ефект переходу з повільним початкомease-out- визначає ефект перехода з повільним закінченнямease-in-out- визначає ефект переходу з повільним початком та закінченнямcubic-bezier(n,n,n,n)- дозволяє визначити свої власні значення в функції кубічного Без’є
В наступному прикладі показані деякі із різних кривих швидкості, які можна використовувати:
Приклад
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
Спробуйте самі »
Затримка ефекту переходу
Властивість transition-delay визначає затримку (в секундах) для ефекту переходу.
В наступному прикладі перед запуском затримка складає 1 секунду:
Transition + Transformation (Перехід + Трансформація)
В наступному прикладі додається ефект переходу до трансформації:
Більше прикладів переходу
CSS властивості переходу можуть бути вказані по одному, наприклад, так:
Приклад
div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
Спробуйте самі »
або використовуючи скорочену властивість transition:
Перевірте себе за допомогою вправ!
CSS Властивості переходу
В наступній таблиці перераховані всі CSS властивості переходу:
| Властивість | Опис |
|---|---|
| transition | Скорочена властивість для встановлення чотирьох властивостей переходу в одну властивість |
| transition-delay | Визначає затримку (в секундах) для ефекту переходу |
| transition-duration | Визначає, скільки секунд або мілісекунд потрібно ефекту переходу для завершення |
| transition-property | Визначає ім’я CSS властивості, для якої призначено ефект переходу |
| transition-timing-function | Визначає криву швидкості ефекту переходу |
