Переходы

Перед чтением этой главы, пожалуйста, прочитайте Всё, что вам нужно знать о 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 }

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

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

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

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

.accordion .baffle {
  height: 0
}

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

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

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

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

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

• Переходы для сайдбара
• Переходы для страниц
• Эффекты с заголовками
• Креативные эффекты со ссылками
• Простые эффекты с набором картинок
• Анимация для эскизов
• Эффект загрузки для элементов

jQuery.Transit

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

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

• Can I Use: CSS Transitions
• MDN: Using CSS transitions