Переходы

Перед чтением этой главы, пожалуйста, прочитайте Всё, что вам нужно знать о 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(4) { transition-delay: 540ms, 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 .author span:nth-child(2)  { transition-delay: 390ms, 0ms }
.ex .author span:nth-child(3)  { transition-delay: 360ms, 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 }
.ex .letter:nth-child(2) 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 }
н М а А C Г S И S Я

Конечно, это только верхушка айсберга. Цвета, градиенты, размеры, местоположение, ориентация и др., всё это может меняться одновременно. Кроме того, у вас есть задержка и пользовательские функции для работы со временем, прямо на кончиках ваших пальцев. CSS-переходы просты в работе. Поверьте, браузер будет делать правильные вещи, когда вы включите переходы для стилевых свойств, потому что он обычно так и делает.

Аккордеон на переключателях

Сочетание состояний HTML с переходами в CSS можно применять для увлекательных взаимодействий. Здесь мы используем псевдоселектор :checked на переключателях для оформления элементов, которые следуют за ними. Этот метод часто называют «хак с чекбоксом», но он может работать почти с любым элементом, который фиксирует состояния через некоторые псевдоселекторы (:checked, :focus и др.).

В этом примере содержится множество тонкостей, но основная идея заключается в следующем: каждый раздел аккордеона содержит элемент <label>, у которого атрибут for совпадает с идентификатором радиокнопки. Итак, три раздела, три радиокнопки. Эти радиокнопки располагаются в документе перед содержимым раздела, так что мы можем использовать соседний селектор + для стилизации разделов, которые появляются после радиокнопок с :checked.

.accordion .baffle {
  height: 0
}

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

Щелчок по <label> внутри раздела включает переключатель (и выключает все остальные переключатели), запуская тем самым открытие/закрытие соответствующего раздела.

И вуаля! Аккордеон только на HTML и CSS.

Аккордеон (от фр. accordéon) — язычковый клавишно-пневматический музыкальный инструмент с полным хроматическим звукорядом на правой клавиатуре, басами и готовым (аккордовым) или готово-выборным аккомпанементом на левой. Современная разновидность ручной гармоники. В 1829 году это название дал венский органный мастер К. Демиан усовершенствованной им гармони.

Аккордеон содержит три основные составные части:

  • правая клавиатура (на которой пятью пальцами правой руки играется сольная партия);
  • мех для привода в действие звуковых язычков обеих клавиатур;
  • левая клавиатура, на которой преимущественно указательным и средним пальцами левой руки осуществляется басово-ритмовый аккомпанемент основной мелодии.

В русской традиции аккордеоном принято называть только инструменты с правой клавиатурой фортепианного типа. В США, Европе и других странах принято называть аккордеонами все разновидности ручных гармоник, которые в свою очередь могут иметь собственные названия. Например — некоторые гармони, они называются диатоническими кнопочными аккордеонами. Баян является разновидностью кнопочного аккордеона и отличается от него особой конструкцией.

В конце XIX века аккордеоны в большом количестве изготавливались в Клингентале (Саксония). До сих пор, одними из самых распространённых в России являются аккордеоны немецкой фирмы Weltmeister различных марок, например, Diana, Stella, Amigo. Встречаются также другие фирмы-производители, как зарубежные, так и советские и российские.

Переходы для вдохновения

Если вы ищете дополнительное вдохновение насчёт того, что ещё можно получить с помощью CSS-переходов, посмотрите эти удивительные демонстрации из Codrops:

jQuery.Transit

Тем, кому нравится приправить свой CSS небольшим JS, посмотрите jquery.transit. Для простых, статических переходов (оксюморон?) это будет перебор. Но вы найдёте это чрезвычайно полезным, если делаете переходы, которые содержат динамические или сформированные пользователем значения свойств CSS.

Дальнейшее чтение

Автор и редакторы

Автор: Адам Шварц
Последнее изменение: 11.08.2018
Редакторы: Влад Мержевич
Курс по вёрстке сайта на CSS Grid