2.20. CSS3-переходи
CSS3-переходи дозволяють анімувати вихідне значення CSS-властивості на нове значення з часом, керуючи швидкістю зміни значень властивостей. Більшість властивостей змінюють свої значення за 16 мілісекунд, тому час стандартного переходу, що рекомендується, — 200ms.
Зміна властивостей відбувається при настанні певної події, що описується відповідним псевдокласом. Найчастіше використовується псевдоклас: hover. Цей псевдоклас не працює на мобільних пристроях, таких як iPhone або Android. Універсальним рішенням, що працює в настільних та мобільних браузерах, буде обробка подій за допомогою JavaScript (наприклад, перемикання класів під час кліку).
Переходи застосовуються до всіх елементів, а також до псевдоелементів: before і after. Для завдання всіх властивостей переходу зазвичай використовують короткий запис властивості transition.
CSS3-переходи можуть застосовуватися не до всіх властивостей та їх значень. Докладний список ви знайдете на цій сторінці.
Створення плавних змін властивостей елементів
- Зміст:
- 1. Назва властивості transition-property
- 2. Тривалість переходу transition-duration
- 3. Функція переходу transition-timing-function
- 4. Затримка переходу transition-delay
- 5. Короткий запис переходу transition
- 6. Плавний перехід кількох властивостей
- 7. Приклади переходів для різних властивостей
Підтримка браузерами
IE: 10.0
Firefox: 16.0, 4.0 -moz-
Chrome: 26.0, 4.0 -webkit-
Safari: 6.1, 3.1 -webkit-
Opera: 12.1, 11.6 -o-
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.4, 4.1 -webkit-
Chrome для Android: 44
1. Назва властивості transition-property
Містить назву CSS-властивостей, до яких буде використано ефект переходу. Значення властивості може містити як одну властивість, так і список властивостей через кому.Під час створення переходу можна використовувати як початковий, і кінцевий стан елемента. Властивість не успадковується.
Створювані ефекти мають бути ненав'язливими. Не всі властивості вимагають плавної зміни в часі, що пов'язано з досвідом користувача. Наприклад, при наведенні на посилання ми хочемо бачити миттєву зміну кольору посилання або кольору та стилю підкреслення. Тому переходи слід використовувати тим властивостей, яких дійсно потрібно привернути увагу.
| transition-property |
|---|
| Значення: |
| none |
Відсутність якості переходу. |
| all |
Значення за промовчанням. Застосовує ефект переходу до всіх властивостей елемента. |
| властивість |
Визначає список CSS-властивостей, перерахованих через кому, що беруть участь у переході. |
| initial |
Встановлює значення властивості значення за замовчуванням. |
| inherit |
Наслідує значення властивості від батьківського елемента. |
2. Тривалість переходу transition-duration
Задає проміжок часу, протягом якого має здійснюватися перехід. Якщо різні властивості мають різні значення для переходу, вони вказуються через кому. Якщо тривалість переходу не зазначена, то анімація при зміні значень властивостей не відбуватиметься. Властивість не успадковується.
| transition-duration |
|---|
| Значення: |
| час |
Час переходу вказується в секундах або мілісекундах, наприклад 2s або 5ms. |
| initial |
Встановлює значення властивості значення за замовчуванням. |
| inherit |
Наслідує значення властивості від батьківського елемента. |
3. Функція переходу transition-timing-function
Властивість задає тимчасову функцію, яка описує швидкість переходу об'єкта від значення до іншого. Якщо ви визначаєте більше одного переходу на елемент, наприклад, колір фону елемента та його положення, ви можете використовувати різні функції для кожної властивості. Властивість не успадковується.
| transition-timing-function |
|---|
| Значення: |
| ease |
Функція за замовчуванням, перехід починається повільно, швидко розганяється і сповільнюється в кінці. |
| linear |
Перехід відбувається рівномірно протягом усього часу, без вагань у швидкості. |
| ease-in |
Перехід починається повільно, а потім плавно прискорюється наприкінці. |
| ease-out |
Перехід починається швидко і плавно сповільнюється наприкінці. |
| ease-in-out |
Перехід повільно починається і повільно закінчується. |
| cubic-bezier(x1, y1, x2, y2) |
Дозволяє вручну встановити значення від 0 до 1 для кривої прискорення. На цьому сайті ви зможете побудувати будь-яку траєкторію переходу. |
| initial |
Встановлює значення властивості значення за замовчуванням. |
| inherit |
Наслідує значення властивості від батьківського елемента. |
Для створення більш реалістичних анімацій використовуйте функцію cubic Bézier:
Рис. 1. Користувацькі функції cubic Bézier із сайту easings.net
| Назва функції переходу |
CSS значення функції |
|---|
| easeInSine |
cubic-bezier(0.47, 0, 0.745, 0.715) |
| easeOutSine |
cubic-bezier(0.39, 0.575, 0.565, 1) |
| easeInOutSine |
cubic-bezier(0.445, 0.05, 0.55, 0.95) |
| easeInQuad |
cubic-bezier(0.55, 0.085, 0.68, 0.53) |
| easeOutQuad |
cubic-bezier(0.25, 0.46, 0.45, 0.94) |
| easeInOutQuad |
cubic-bezier(0.455, 0.03, 0.515, 0.955) |
| easeInCubic |
cubic-bezier(0.55, 0.055, 0.675, 0.19) |
| easeOutCubic |
cubic-bezier(0.215, 0.61, 0.355, 1) |
| easeInOutCubic |
cubic-bezier(0.645, 0.045, 0.355, 1) |
| easeInQuart |
cubic-bezier(0.895, 0.03, 0.685, 0.22) |
| easeOutQuart |
cubic-bezier(0.165, 0.84, 0.44, 1) |
| easeInOutQuart |
cubic-bezier(0.77, 0, 0.175, 1) |
| easeInQuint |
cubic-bezier(0.755, 0.05, 0.855, 0.06) |
| easeOutQuint |
cubic-bezier(0.23, 1, 0.32, 1) |
| easeInOutQuint |
cubic-bezier(0.86, 0, 0.07, 1) |
| easeInExpo |
cubic-bezier(0.95, 0.05, 0.795, 0.035) |
| easeOutExpo |
cubic-bezier(0.19, 1, 0.22, 1) |
| easeInOutExpo |
cubic-bezier(1, 0, 0, 1) |
| easeInCirc |
cubic-bezier(0.6, 0.04, 0.98, 0.335) |
| easeOutCirc |
cubic-bezier(0.075, 0.82, 0.165, 1) |
| easeInOutCirc |
cubic-bezier(0.785, 0.135, 0.15, 0.86) |
| easeInBack |
cubic-bezier(0.6, -0.28, 0.735, 0.045) |
| easeOutBack |
cubic-bezier(0.175, 0.885, 0.32, 1.275) |
| easeInOutBack |
cubic-bezier(0.68, -0.55, 0.265, 1.55) |
4. Затримка переходу transition-delay
Необов'язкова властивість дозволяє зробити так, щоб зміна властивості відбувалася не моментально, а з деякою затримкою. Чи не успадковується.
| transition-delay |
|---|
| Значення: |
| час |
Час затримки переходу вказується у секундах або мілісекундах. |
| initial |
Встановлює значення властивості значення за замовчуванням. |
| inherit |
Наслідує значення властивості від батьківського елемента. |
5. Короткий запис переходу
Всі властивості, що відповідають за зміну зовнішнього вигляду елемента, можна поєднати в одну властивість transition
transition: transition-property transition-duration transition-timing-function transition-delay;
Якщо скористатися значеннями за промовчанням, запис
6. Плавний перехід кількох властивостей
Для елемента можна задати кілька послідовних переходів, перерахувавши їх через кому. Кожен перехід можна оформити своєю тимчасовою функцією.
7. Приклади переходів для різних властивостей
Наведіть курсором миші на блоки, щоб побачити властивості дії.
Як зробити плавний перехід з одного зображення до іншого у Photoshop
wikiHow працює за принципом вікі, а це означає, що багато наших статей написано кількома авторами. При створенні цієї статті над її редагуванням та покращенням працювало, у тому числі анонімно, 10 осіб(а).
Кількість переглядів цієї статті: 93 146.
Змішування фотографій є популярним ефектом у Adobe Photoshop. Його можна створити за допомогою накладання зображень один на одного та подальшого коригування градієнта або непрозорості зображення. Кожне зображення потрібно помістити на окремий шар, додати шар-маску, а потім внести коригування за допомогою інструмента Градієнт. У разі налаштування непрозорості необхідно виконати аналогічні дії. Не забудьте перевірити двічі, що ви вносите зміни на правильному шарі.
За допомогою інструмента "Градієнт"
Відкрийте зображення у Photoshop. Натисніть «Файл» > «Відкрити» та виберіть перше зображення, яке буде базовим.
Натисніть «Шар» > «Новий» > «Шар». Це меню розташоване у верхньому рядку меню. За допомогою шарів можна редагувати зображення, при цьому базове зображення не торкається.
Додайте друге зображення до нового шару. Натисніть «Файл» > «Помістити» та знайдіть друге зображення, яке потрібно змішати з першим (базовим) зображенням.
- Фонові зображення не можна переміщувати. Якщо одне з вибраних зображень є фоновим, натисніть Alt (Windows) або ⌥ Option (Mac) і двічі клацніть на «Фон» на панелі «Шари» (за замовчуванням розташовано праворуч), щоб перетворити фоновий шар на звичайний шар.
На панелі «Шари» виберіть шар із зображенням, яке буде переходити до іншого зображення. На цій панелі відображаються всі шари; за умовчанням вона розташована праворуч.
Натисніть «Додати шар-маску». Ця кнопка виглядає як квадрат з колом та розташована в нижній частині панелі «Шари». Мініатюра маски з'явиться поруч із шаром, до якого вона додана.
Натисніть мініатюру, щоб вибрати шар-маску. Навколо мініатюри з'явиться пунктирна рамка, тобто шар-маска обрана.
Відкрийте меню "Редагування градієнта". Воно знаходиться у верхньому лівому кутку екрана (на верхній панелі інструментів) і з'явиться, коли ви візьмете інструмент Градієнт. Це меню містить різні типи градієнта.
- Можна використовувати інші градієнти (наприклад, кольорові), але чорно-білий градієнт найкраще підходить для стандартного переходу одного зображення до іншого.
- Двічі перевірте, чи вибрано шар-маска; інакше плавний перехід не працюватиме.
- Затисніть ⇧ Shift , щоб вказівник миші рухався прямою.
