CSS-анимация стала неотъемлемой частью веб-разработки, позволяя разработчикам создавать динамичный и привлекательный пользовательский интерфейс. В этой статье мы рассмотрим основы CSS-анимации, включая переходы, ключевые кадры и функции синхронизации.

Навигация по статье

Transitions

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

Вот пример:

button {
  background-color: blueviolet;
  transition: background-color 0.5s ease;
}

button:hover {
  background-color: red;
}

В этом примере цвет фона кнопки изменится с синего на красный в течение 0,5 секунды, когда пользователь наведет на нее курсор мыши.

Третье значение свойства transitions — это временная функция, определяющая скорость изменения во время перехода.

Существует несколько функций синхронизации, которые можно использовать в переходах CSS, в том числе:

easy (по умолчанию) — начинается медленно, ускоряется в середине и замедляется в конце. Это наиболее распространенная функция синхронизации, которая часто используется для создания естественных переходов.
linear — прогрессирует с постоянной скоростью на протяжении всего перехода. Это создает последовательные и предсказуемые изменения.
easy-in — начинается медленно и постепенно ускоряется. Это полезно для создания тонкого, мягкого эффекта перехода.
easy-out — начинается быстро и постепенно замедляется. Это полезно для создания быстрого, резкого эффекта.
easy-in-out — начинается медленно, ускоряется в середине и замедляется в конце. Это похоже на функцию синхронизации замедления, но с более выраженным изменением скорости.

Существуют также более продвинутые функции синхронизации, которые позволяют еще больше контролировать анимацию, например, cube-bezier(), которая позволяет вам определить пользовательскую кубическую кривую Безье.

Keyframes

Свойство keyframes позволяет создавать более сложные анимации, задавая ряд стилей в разные моменты времени. Чтобы создать анимацию с keyframes, вам необходимо определить набор ключевых кадров, используя правило @keyframes, а затем применить анимацию к элементу, используя свойство animation. Вот пример:

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

button {
  animation: pulse 1s ease-in-out infinite;
}

В этом примере кнопка будет менять размер путем масштабирования от 100% до 120% и обратно до 100% в течение 1 секунды с использованием анимации keyframes.

Продвинутая анимация

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

Преобразования

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

Вот пример вращающегося куба:

.cube {
  position: relative;
  transform-style: preserve-3d;
  animation: spin 3s infinite linear;
}

@keyframes spin {
  to {
    transform: rotateY(360deg);
  }
}

В этом примере элемент .cube поворачивается вдоль оси Y, создавая эффект вращения.

Комбинирование

Вы можете комбинировать несколько эффектов для создания сложных многоступенчатых анимаций. Используя свойства animation-delay и animation-fill-mode, вы можете упорядочивать анимацию и управлять ее поведением, когда она не запущена.

Вот пример прыгающего мяча, который меняет цвет:

.ball {
  position: relative;
  animation: bounce 1s infinite, color-change 2s infinite;
}

@keyframes bounce {
  0% {
    top: 0;
  }
  50% {
    top: 50px;
  }
  100% {
    top: 0;
  }
}

@keyframes color-change {
  0% {
    background-color: red;
  }
  50% {
    background-color: blue;
  }
  100% {
    background-color: red;
  }
}

В этом примере элемент ball подпрыгивает вверх и вниз, меняя цвет каждые 2 секунды.

Заключение

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