Магия CSS. Глава 6. Переходы

“Все, что вам нужно знать о переходах в CSS”

Перед прочтением этой главы, пожалуйста, прочитайте All you need to know about CSS Transitions от Алекса МакКоя. Это фантастический ресурс, отвечающий на большую часть вопросов.

Переходы

Переходы в CSS являются идеальным решением, если вам нужно перевести элемент от одного значения свойства к другому по некому простому пути.

Теперь давайте объединим это знание с тем, что мы узнали в предыдущих главах о Цвете и Типографике.

Примеры

Пример 1: Обесцвечивание букв по отдельности

Одним из самых мощных инструментов является свойство transition-delay. Оно отвечает за задержку перед началом перехода. В этом примере мы зададим как будто случайные задержки для каждой буквы, создавая эффект проявления. Очень изящно и привлекательно.

.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 переходы по-настоящему раскрывают свой потенциал если их группировать. В этом примере мы укажем два перехода, один для преобразования (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 .title span:nth-child(7) { transition-delay: 720ms, 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 .author span:nth-child(14) { transition-delay:  30ms, 0ms }.ex:hover .title span,
.ex:hover .author span {
    transition-delay: 0
}

Пример 3D

И, если вам интересно, переходы работают и для 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 }

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

Магия! Аккордеон на радиокнопках

Комбинация состояний в HTML и переходов в CSS открывает широкие возможности для интерактива. Здесь мы используем псевдо-класс :checked для радиокнопок чтобы стилизовать элементы, следующие за ними. Этот метод часто называют “The Checkbox Hack”, но он работает с любыми элементами, для которых применимы псевдо-классы :checked, :focus.

В этом примере много тонкостей, но основная идея: каждая секция аккордеона имеет label, связанный с радиокнопкой при помощи id. И так, три секции, три радиокнопки. Кнопки расположены в документе непосредственно перед содержимым секции, так что мы можем использовать в селекторе + для задания стилей раскрытого состояния секций.

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

После нажатия на label кнопка переходит в состояние :checked (и наоборот при повторном нажатии), срабатывает механизм открытия/закрытия соответствующей секции.

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

Вдохновение

Если вы ищете вдохновляющие примеры того, что можно сделать при помощи transition — посмотрите эти невероятные демо:

jQuery.Transit

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

Внеклассное чтение

P.S. Если вам понравилась эта статья — нажмите зеленое сердечко. Это много значит для меня. Спасибо!

Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся дудле и оставляете свой комментарий. Спасибо!

Перевод главы из сборника The magic of CSS by Adam Schwartz
Настоятельно советую обратится к первоисточнику. Он прекрасен!