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

Анимация Keyframe

Анимация Keyframe — это техника, при которой вы определяете определенные точки в последовательности анимации, известные как ключевые кадры. Вы можете указать, как элемент должен выглядеть в каждом ключевом кадре, и браузер будет плавно переходить между ними. Вот пример:

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}

.element {
  animation: bounce 1s infinite;
}

Результат:

В этом примере мы определяем анимацию ключевого кадра под названием «bounce», которая заставит элемент двигаться вверх и вниз. Анимация начинается с 0% временной шкалы, где элемент находится в своем состоянии по умолчанию. При 50% элемент перемещается вверх на 50 пикселей. Наконец, при 100% элемент возвращается в свое состояние по умолчанию. Значение ifninite для свойства animation означает, что анимация будет повторяться бесконечно.

Анимация Delay

Анимация Delay — это метод, при котором вы указываете, как долго анимация должна ждать перед запуском. Это полезно, когда вы хотите создать последовательность анимаций, которые начинаются в разное время. Вот пример:

.element {
  animation: fade-in 2s ease-out 1s infinite;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Результат:

В этом примере мы определяем анимацию ключевого кадра под названием fade-in, которая заставит элемент затухать более чем за 1 секунду. Значение «ease-out» для свойства animation указывает, что анимация должна начинаться быстро и замедляться в конце. Значение «2s» для свойства animation-delay указывает, что анимация должна подождать 2 секунды перед запуском.

Направление анимации

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

.element {
  animation: move 500ms ease-out forwards;
}

@keyframes move {
  from {
    transform: translateX(0);
  to {
    transform: translateX(200px);
  }
}

Результат (нажмите, чтобы запустить анимацию):

В этом примере мы определяем анимацию ключевого кадра под названием move, которая заставит элемент перемещаться вперед по горизонтали. Значение forwards для свойства animation означает, что элемент должен оставаться в своем конечном состоянии после завершения анимации. Без этого значения элемент вернулся бы в свое исходное состояние после завершения анимации.

Fill Mode

Fill mode — это метод, при котором вы указываете, как должен выглядеть элемент до и после запуска анимации. По умолчанию, когда анимация заканчивается, элемент возвращается в свое исходное состояние. Однако в режиме анимационной заливки вы можете заставить элемент оставаться в его конечном состоянии или вернуться к исходному состоянию. Вот пример:

.element {
  animation: spin 1s ease-in-out forwards;
  transform-origin: center center;
  background-color: red;
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
    background-color: blue;
  }
}

.element:hover {
  animation-play-state: paused;
}

Результат (нажмите, чтобы запустить анимацию):

В этом примере мы определяем анимацию ключевого кадра под названием spin, которая заставит элемент вращаться на 720 градусов в течение 1 секунды. Значение «forwards» для свойства animation означает, что элемент должен оставаться в своем конечном состоянии после завершения анимации. Свойство «transform-origin» указывает точку, вокруг которой элемент должен вращаться, а свойство «background-color» изменяет цвет фона элемента во время анимации. Наконец, мы добавляем эффект наведения курсора, который приостанавливает анимацию, когда пользователь наводит курсор на элемент.

Функция синхронизации анимации

Функция синхронизации анимации — это метод, при котором вы указываете, как анимация прогрессирует с течением времени. По умолчанию анимации имеют функцию линейной синхронизации, что означает, что они прогрессируют с постоянной скоростью от начала до конца. Однако с помощью функции синхронизации анимации вы можете создавать более сложные анимации, которые ускоряются, замедляются или меняют направление. Вот пример:

.element {
  animation: spin 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  transform-origin: center center;
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

Результат (нажмите, чтобы запустить анимацию):

В этом примере мы определяем анимацию ключевого кадра под названием spin, которая заставит элемент вращаться на 1080 градусов в течение 2 секунд. Значение «cubic-bezier» для свойства animation задает пользовательскую функцию синхронизации, которая запускается медленно, ускоряется, а затем снова замедляется. Вы можете поэкспериментировать с различными значениями функции «cubic-bezier» для создания различных эффектов.

Сводная таблица: CSS анимация

Таблица с некоторыми основными свойствами анимации CSS и их возможными значениями:

Заключение

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