Переходи

Перед читанням цього розділу, будь ласка, прочитайте Все, що вам потрібно знати про CSS-переходи , автор Алекс МакКоу. Це фантастичний ресурс і він охоплює більшу частину того, що ми хотіли б охопити. згідно з деяким шляхом.

Тепер разом об'єднаємо це знання з тим, що ми дізналися в попередніх розділах, присвячених кольору та друкарні.

Приклади

Приклад 1: Окремі літери випадково розчиняються

У нашому розпорядженні є один надзвичайно потужний інструмент під назвою transition-delay. Затримки переходів дають змогу відкласти початок спрацьовування переходу. У цьому першому прикладі ми встановлюємо псевдовипадкові затримки у opacity для кожної літери, створюючи витончений та привабливий ефект.

. ex span { opacity: 0; transition: opacity 1300ms } 
.ex span:nth-child(1) { transition-delay: 200ms } 
.ex span:nth-child(2) { transition-delay: 1200ms } 
.ex span:nth-child(3) { transition-delay: 800ms } 
.ex span:nth-child(4) { transition-delay: 300ms } 
.ex span:nth-child(5) { transition-delay: 700ms } 
.ex span:nth-child(6) { transition-delay: 600ms } 
.ex span:nth-child(7) { transition-delay: 400ms } 
.ex span:nth-child(8) { transition-delay: 900ms } 
.ex span:nth-child(9) { transition-delay: 700ms } 
.ex span:nth-child(10) { transition-delay: 50ms } 
.ex:hover span { opacity: 1 }

Приклад 2: Кілька про переходи із затримкою

Переходи CSS починають по-справжньому блищати, коли вони комбінуються разом. У цьому прикладі ми вказуємо два переходи, один для -webkit-transform, а другий для opacity. Вони написані в рамках однієї декларації transition, розділяючись комою.

.ex .title span, .ex .author span { /* ... */
transition:-webkit-transform 800ms, opacity 800ms }

Оскільки ми визначили два переходи, то маємо також вказати і дві затримки для них. Вони пишуться схоже.

.ex .title span:nth-child(1) { transition-delay: 360ms, 300ms } 
.ex .title span:nth-child(2) { transition-delay: 420ms, 300ms } 
.ex .title span:nth-child(3) { transition-delay: 480ms, 300ms } 
/* ... */

Разом ці переходи зі своїми затримками дозволяють нам створити гарний ефект хвилі з літерами.

.ex .title span, .ex .author span { display: inline-block; opacity: 0; transition:-webkit-transform 800ms, opacity 800ms} 
.ex .title span {-webkit-transform: translateZ(0) translateY(-6rem) } 
.ex .author span {-webkit-transform: translateZ(0) translateY(6rem) } 
.ex:hover .title span, .ex:hover .author span { opacity: 1; transition:-webkit-transform 800ms, opacity 1200ms;-webkit-transform: translateZ(0) translateY(0) } 
.ex .title span:nth-child(1) { transition-delay: 360ms, 300ms } 
.ex .title span:nth-child(2) { transition-delay: 420ms, 300ms } 
.ex .title span: nth-child(3) { transition-delay: 480ms, 300ms } 
.ex . .title span:nth-child(5) { transition-delay: 600ms, 300ms } 
.ex .title span:nth-child(6) { transition-delay: 660ms, 300ms } 
.ex .author span:nth-child( 1) { transition-delay: 420ms, 0ms } 
.ex . , 0ms } 
.ex .author span:nth-child(4) { transition-delay: 330ms, 0ms } 
.ex .author span:nth-child(5) { transition-delay: 300ms, 0ms } 
.ex .author span :nth-child(6) { transition-delay: 270ms, 0ms } 
.ex .author span:nth-child(7) { transition-delay: 240ms, 0ms } 
.ex .author span:nth-child(8) { transition-delay: 210ms, 0ms } 
.ex .author span:nth-child(9) { transition-delay: 180ms, 0ms } 
.ex .author span:nth-child(10) { transition-delay: 150ms, 0ms } 
.ex .author span:nth-child(11) { transition-delay: 120ms, 0ms } 
.ex .author span:nth-child(12) { transition-delay: 90ms, 0ms } 
.ex .author span:nth-child(13) { transition-delay: 60ms, 0ms } 
.ex:hover .title span, .ex:hover .author span { transition-delay: 0 }

Приклад 3D

І той випадок, коли ви здивуєтеся: переходи також працюють з тривимірною трансформацією.

.ex .letter {-webkit-perspective: 20rem } 
.ex .front, .ex .back {-webkit-backface-visibility: hidden; transition:-webkit-transform 800ms } 
.ex .back {-webkit-transform: translateZ(0) rotateY(-180deg) } 
.ex:hover .back {-webkit-transform: translateZ(0) rotateY(0deg) } 
. ex:hover .front {-webkit-transform: translateZ(0) rotateY(180deg) } 
.ex .letter:nth-child(1) span { transition-delay: 200ms) span { transition-delay: 400ms } 
.ex .letter:nth-child(3) span { transition-delay: 600ms } 
.ex .letter:nth-child(4) span { transition-delay: 800ms } 
.ex .letter :nth-child(5) span { transition-delay: 1000ms }

Звичайно, це лише верхівка айсберга. Кольори, градієнти, розміри, розташування, орієнтація та інших., це може змінюватися одночасно. Крім того, у вас є затримка і функції користувача для роботи з часом, прямо на кінчиках ваших пальців. CSS-переходи прості у роботі. Повірте, браузер буде робити правильні речі, коли ви увімкнете переходи для стильових властивостей, тому що він зазвичай так і робить. для цікавих взаємодій. Тут ми використовуємо псевдоселектор :checked на перемикачах для оформлення елементів, які слідують за ними. Цей метод часто називають «хак з чекбоксом», але він може працювати майже з будь-яким елементом, який фіксує стан через деякі псевдоселектори (:checked, : focus та ін.).

У цьому прикладі міститься безліч тонкощів, але основна ідея полягає в наступному: кожен розділ акордеону містить елемент <label>, у якого атрибут for збігається з ідентифікатором радіокнопки. Отже, три розділи, три радіокнопки. Ці радіокнопки розміщуються в документі перед вмістом розділу, тому ми можемо використовувати сусідній селектор + для стилізації розділів, які з'являються після радіокнопок з :checked.

.accordion .baffle { height: 0 } 
.accordion input[type="radio"]:checked + .baffle { height: 10em }

Клацання по <label> всередині розділу включає перемикач (і вимикає всі інші перемикачі), запускаючи тим самим відкриття/закриття відповідного розділу.

Переходи для натхнення

Якщо ви шукаєте додаткове натхнення щодо того, що ще можна отримати за допомогою CSS-переходів, перегляньте ці дивовижні демонстрації з Codrops:

• Переходи для сайдбара
• Переходи для сторінок
• Ефекти із заголовками
• Креативні ефекти з посиланнями
• Прості ефекти з набором картинок
• Анімація для ескізів
• Ефект завантаження для елементів

jQuery.Transit

Тим, кому подобається приправити свій CSS невеликим JS, подивіться jquery.transit . Для простих, статичних переходів (оксюморон?) це буде перебір. Але ви знайдете це надзвичайно корисним, якщо робите переходи, які містять динамічні або сформовані користувачем значення властивостей CSS