Многоступенчатая анимация и плавные переходы

Многоступенчатая анимация и плавные переходы

От автора: концепция CSS анимации довольно проста. Задается название анимации, затем в @keyframes определяется список движений и в конце анимация крепится к какому-либо элементу. Если вы до сих пор не работали с данной технологией, можете ознакомиться прямо на нашем сайте в разделе Альманах.

Однако чтобы создать достаточно сложную анимацию, существуют свои премудрости. Один из таких трюков это многоступенчатые переходы. Именно их мы и рассмотрим сегодня в статье.

Keyframe анимация может быть пошаговой

Если нам необходимо изменить цвет фона, скажем, с оранжевого на черный с помощью keyframe анимации при наведении на элемент курсора мыши за 5 секунд, алгоритм разобьет весь процесс анимации на отдельные шаги по времени и выполнит плавный переход.

body {
  background: black;
  animation: color-me-in 5s; /* можно добавить "infinite alternate" */
}

@keyframes color-me-in {
  /* можно назвать "шаг 1" */
  0% {	
    background: orange;
  }
  /* можно назвать "шаг 2" */
  100% {
    background: black;
  }
}

Шагов анимации можно добавлять сколь угодно много. К примеру, ниже мы добавили между оранжевым и черным синий цвет.

@keyframes color-me-in {
  0% {
    background: orange;
  }
  /* добавили еще один шаг в середину */
  50% {
    background: blue;
  }
  100% {
    background: black;
  }
}

В двух словах про многоступенчатую анимацию: от начала и до конца процесса более одной анимации.

Keyframe анимацию по желанию можно интерполировать и изменять

Посмотрите, как цвета выше переходят один в другой. Отличное свойство по умолчанию. Более того, цвета плавно переходят, как в animation-timing-function. Анимация намного более плавная и расслабляющая, чем при использовании linear. Хотя у каждого значения свое применение. С помощью функции steps() можно принудительно задать точное число шагов анимации. Демо:

Применение многоступенчатой анимации

Хорошим примером такой анимации может послужить эквалайзер в Apple Music. Вы должны были видеть его или хотя бы что-то похожее: серия из вертикальных колонок то поднимается, то опускается, создавая иллюзию движения в такт музыке. Ниже показан пока что не двигающийся пример:

Пять вертикальный столбцов, необходимо заставить их двигаться, манипулируя их высотой. Создадим анимацию с именем equalize из 25 шагов. Т.е. один шаг это 4% анимации, каждый шаг применяется к элементу .bar:

Отлично, но они двигаются одинаково, не самый крутой эквалайзер. При вызове анимации каждому .bar можно добавить свое значение animation-duration, создав таким образом эффект того, что они двигаются независимо друг от друга.

Во и все! Эквалайзер выглядит, как мы его задумывали, двигается в ритм музыке, а мы-то всего лишь используем все ту же самую многоступенчатую анимацию. В примере ниже я поигрался со значением animation-delay (отрицательные значения, колонки стартуют одновременно):

Мы чуть не забыли о многоступенчатых переходах!

Transition анимация немного проще. Анимация начинается с одного фиксированного набора свойств и заканчивается другим. Ниже короткий пример:

.move-me {
  transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

Как и в случае с animation можно анимировать одинаковые наборы свойств. Давайте изменим красный квадрат на оранжевый прямоугольник при наведении мыши, совместив свойства background-color и width:

.box {
  width: 150px;
  height: 150px;
  background-color: red;
  transition: 1s;
}

.box:hover {
  width: 300px;
  background-color: orange;
}

Код говорит элементу .box совершить плавный переход свойств width и background-color при наведении мыши на объект, анимация выполняется за 1 секунду.

Не совсем многоступенчатая анимация, но уже близко!

Добавление многоступенчатости transition анимации

Можно сделать нашу анимацию немного интереснее, добавив запятых, поигравшись со значениями задержки и длительности. Таким образом можно добиться того же эффекта, как и в keyframe анимации. Давайте возьмем пример выше и изменим его. Сначала сделаем плавное изменение ширины, а после изменим цвет.

.box {
  transition: 
    /* щаг 1 */
    width      1s,
    /* шаг 2 */
    background 0.5s 1s;
}

Можно сделать еще лучше и добавить дополнительные движения.

Изменяем ширину со 150px на 300px при наведении за 1 секунду.

Изменяем background-color с красного на оранжевый за 1 секунду.

Добавляем box-shadow и изменим направление тени за 1 секунду.

Добавим строку с текстом, которая плавно исчезает и уезжает влево после того, как свойства width и height прекратили изменения.

Добавляем другую строку с текстом, выскакивающую справа после того, как первая строка исчезла.

Для элементов, где анимируется более одного свойства сделать это можно, объединив transition анимацию в одно свойство.

/* наш квадрат */
.box {
  width: 150px;
  height: 150px;
  background-color: red;
  box-shadow: 5px 5px 25px #000;
  transition: all 1s;
}

/* hover... */
.box:hover {
  /* увеличиваем width */
  width: 300px;
  /* изменяем цвет*/
  background-color: orange;
  /* двигаем тень */
  box-shadow: -5px 5px 25px #000;
}

/* Первая строка текста */
.box__blurb {
  /* Начинаем с полной непрозрачности, центрирована */
  opacity: 1;
  transform: translateX(45px);
  /* затем плавно изменяем эти два свойства */
  transition:
    opacity 0.5s 2s,
    transform 0.5s 0.5s;
}

/* .box hover... */
.box:hover .box__blurb {
  /* затухание */
  opacity: 0;
  /* двигаем вправо */
  transform: translateX(-500px);
}

/* Вторая строка текста */
.rect__blurb {
  /* элемент по началу сдвинут за рамку и прозрачен */
  opacity: 0;	
  transform: translateX(500px);
  /* Плавно изменяем два свойства */
  transition: 
    opacity 0.5s 1s,
    transform 0.5s 1s;
}

/* .box hover... */
.box:hover .rect__blurb {
  /* Плавное появление */
  opacity: 1;
  /* выход строки справа */
  transform: translateX(-100px);
}

И вот, что мы получили. Добавили немного красоты:

Ниже показан еще один пример, все hover эффекты разнесены по отдельным этапам:

Заключение

Многоступенчатая анимация и переходы забавный способ, доступный нам, для создания шикарной динамики в CSS. Эквалайзер в этой статье это один из примеров практического применения многоступенчатой анимации, но есть и множество других способов применения. Ana Tudor использовала анимацию в статье умопомрачительная анимация на сайте CSS-Tricks. У Rémi Lacorne также есть хороший пример плавных переходов.

А вы использовали многоступенчатую анимацию в своих проектах, если да, то как именно? Создавали ли вы супер сложную, сводящую челюсти анимацию? Или делали легкие незаметные вкрапления для улучшения впечатления у пользователей от вашего сайта? Пишите обо всем в комментариях.

Автор: Geoff Graham

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Курс по CSS3

Прямо сейчас изучите CSS3 с нуля!

Смотреть курс

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. DimKi

    Bravo …
    S.P.S.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree