Самый простой способ анимировать ваши элементы - использовать CSS-переходы (CSS transitions). CSS-переходы позволяют плавно переходить из одного состояния в другое. В результате мы имеем симпатичную анимацию при изменении значений свойств элементов.

Взгляните, как резко меняется цвет фона при наведении на кнопку:

А вот как плавно будет выглядеть изменение фона при использовании CSS-переходов:

Чтобы задать переход для элемента, необходимо использовать свойство transition:

.button {
  transition: property duration transition-timing-function delay;
}

Оно состоит из 4-х показателей, которые могут быть выражены как вместе (объединены общим свойством transition), так и по отдельности:

.button {
  transition-property: property;
  transition-duration: duration;
  transition-timing-function: timing-function;
  transition-delay: delay;
}

Назначение свойств:

• transition-property: какие свойства нам необходимо анимировать;
• transition-duration: как долго будет длиться анимация;
• transition-timing-function: каким образом будет протекать анимация;
• transition-delay: время задержки анимации.

При использовании переходов, обязательно должны быть указаны transition-property и transition-duration.

Также стоит обратить внимание, что CSS transitions - это особый вид анимации, в котором есть только начальное и конечное состояние.

transition-property

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

По умолчанию свойство transition-property имеет значение all, что означает - будут анимированны все возможные свойства. Однако, если в этом нет необходимости, правильней задавать для анимации только нужное свойство.

.button {
  color: black;
  background-color: red;
  transition-property: background-color;
}
.button:hover {
  color: white;
  background-color: green;
}

В данном примере у нас есть событие, при котором стили кнопки должны измениться - наведение. Применив свойство transition-property: background-color; мы сообщаем браузеру, что именно фоновый цвет должен измениться плавно.

Если нам необходима анимация нескольких свойств, то указываем их через запятую:

.button {
  color: black;
  background-color: red;
  transition-property: background-color, color;
}
.button:hover {
  color: white;
  background-color: green;
}

Естественно, данные примеры в чистом виде плавности перехода не придадут, поскольку для полноценной анимации необходимо два обязательных свойства - transition-property и transition-duration.

transition-duration

Значением этого свойства будет длительность анимации при переходе одного свойства элемента в другое. Выражается оно в секундах (s) или миллисекундах (ms).

.button {
  transition-duration: 0.3s;  /* эквивалентно 300ms */
}

С двумя основными свойствами анимация отработает:

.button {
  background-color: red;
  transition-property: background-color;
  transition-duration: 0.3s;
}
.button:hover {
  background-color: green;
}

transition-timing-function

Данное свойство определяет, каким образом будет проходить процесс анимации. По умолчанию оно transition-timing-function: ease; -  переход ускоряется в начале и замедляется в конце.

.button {
  transition-timing-function: ease;
}

К простым значениям свойства относятся: ease, linear, ease-in, ease-out, ease-in-out.

К более сложным, вычисляемым значениям свойства относятся: step-start, step-end, steps(), cubic-bezier(). Последний рассмотрим подробней.

cubic-bezier

cubic-bezier() - значение, позволяющее задать свою функцию движения в виде кубической кривой Безье. Представляет оно из себя набор из четырех значений, которые делают transition-timing-function более кастомизированным. Синтаксис данного значения следующий:

.button {
  transition-timing-function: cubic-bezier(x1, y1, x2, y2);
}

Параметры x1, y1, x2, y2 представляют собой точки в пространстве, на основании которых строится кривая. Амплитуда и колебание волны кривой соответствуют ходу протекания анимации. Можно попытаться более детально разобраться в тонкостях вычисления координат и обозначать их вручную, или, как чаще всего делают, воспользоваться любым генератором кривой. Пример хорошего генератора кривой Безье с преобразованием ее в значение для transition-timing-function.

transition-delay

Свойство отвечает за задержку анимации. Другими словами, мы указываем сколько должно пройти времени, прежде чем выполнятся переходы. Как и для transition-duration, используют секунды или миллисекунды.

.button {
  transition-delay: 1s;
}

В примере ниже анимация фона кнопки при наведении отработает через 1 секунду:

Переходы ДО и ПОСЛЕ

Иногда необходимо, чтобы свойства анимировались по-разному в зависимости от состояния элемента. К примеру, при наведении на кнопку мы хотим видеть задержку анимации, а когда убираем наведение - не хотим. Во всех примерах выше переходы были одинаковы как до, так и после указанного события.

Для этого переход, который мы хотим увидеть по ховеру, необходимо дополнительно указать для состояния наведения. После того как у нас пропадет ховер - отработает обычный переход.

.button {
  background-color: red;
  transition-property: background-color;

  /* Когда мы убираем курсор с кнопки, цвет фона будет становиться прежним в течение 500мс */
  transition-duration: 0.5s;
}
.button:hover {
  background-color: green;

  /* При наведении на кнопку цвет фона будет меняться в течение 300мс с задержкой 200мс */
  transition-delay: 0.2s;
  transition-duration: 0.3s;
}

transition

Как упоминалось ранее, все 4 свойства можно заключить в одно общее - transition.

.button {
  transition: all 1s ease-in-out 0.3s;  /* переход будет одинаков для всех свойств */
}

Для нескольких свойств, значения записываются через запятую.

.button {
  transition: color 0.25s linear 0.1s, opacity 0.3s, transform 0.2s ease-in-out;
}