css властивість transition
CSS властивість transition встановлює ефект переходу між двома станами елемента. Використовується з псевдокласом :hover або :active або якщо стан елементу був динамічно змінений за допомогою JavaScript.
Властивість transition - це універсальна властивість, яка дозволяє одночасно задати чотири значення, які розділені пропуском:
transition-propertytransition-durationtransition-timing-functiontransition-delay
| Порада: | Завжди вказуйте властивість |
| Нотатка: | Зверніть увагу, що порядок запису значень для властивості має дуже велике значення. |
Синтаксис
transition: property duration timing-function delay|initial|inherit;Властивість transition може отримувати 6 значень:
transition-propertyІм'я властивості, за якою ми будемо слідкувати. І коли значення цієї властивості зміниться - запуститься ефект переходу.
transition-durationТривалість ефекту переходу.
transition-timing-functionВизначає криву (функцію) ефекту переходу.
transition-delayЗатримка ефекту переходу.
initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивості від свого батьківського елемента (якщо відповідна властивість встановлена)
| Значення без задання: | all 0s ease 0s |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.transition="all 2s" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| transition | 26.0 |
10.0 |
16.0 |
6.1 |
12.10 |
12.0 |
| Переглядач | |||
|---|---|---|---|
| transition | 4.4 |
16.0 |
3.2 -webkit- |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад застосування властивості transition
Простий приклад для демонстрації роботи властивості
Коли елемент <input type="text"> отримує фокус, він повільно змінює свою ширину з 100px до 250px
input[type=text] {
width: 100px;
-webkit-transition: ease-in-out width .35s ease-in-out; /* Safari 3.1 to 6.0 */
transition: ease-in-out width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}Наведіть курсор миші на елемент <div>, щоб поступово змінити його ширину з 100px до 300px
div {
width: 100px;
-webkit-transition: width 2s; /* Safari 3.1 to 6.0 */
transition: width 2s;
}
div:hover {
width: 300px;
}Коли елемент <input type="text"> отримує фокус, він повільно змінює свою ширину з 100px до 250px
input[type=text] {
width: 100px;
-webkit-transition: ease-in-out width .35s ease-in-out; /* Safari 3.1 to 6.0 */
transition: ease-in-out width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}Наведіть курсор миші на елемент <div>, щоб поступово змінити його ширину з 100px до 300px
div {
width: 100px;
-webkit-transition: width 2s; /* Safari 3.1 to 6.0 */
transition: width 2s;
}
div:hover {
width: 300px;
}