CSS animation

20 февраля 2020 CSS

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

Каждую анимацию необходимо определить с помощью правила @keyframes, которое затем вызывается со свойством animation, например:

.element {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}

Каждое правило @keyframesопределяет, что должно происходить в определенные моменты анимации. Например, 0% — это начало анимации, а 100% — это конец. Эти ключевые кадры могут затем управляться либо сокращенным свойством animation, либо его восемью доп. свойствами, чтобы дать больше контроля над тем, как следует манипулировать этими ключевыми кадрами.

Доп. свойства animation

animation-name — объявляет имя правила @keyframes, которым нужно манипулировать.

animation-duration — продолжительность анимации для завершения одного цикла.

animation-timing-function — устанавливает предустановленные кривые ускорения, такие как ease или linear.

animation-delay — время между загружаемым элементом и началом последовательности анимации.

animation-direction — устанавливает направление анимации после цикла. Его значение по умолчанию сбрасывается в каждом цикле.

animation-iteration-count — сколько раз анимация должна быть выполнена.

animation-fill-mode — устанавливает, какие значения применяются до / после анимации.

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

animation-play-state — приостановить/воспроизвести анимацию.

Эти доп. свойства могут быть использованы следующим образом:

@keyframes stretch {
  /* действия animate здесь */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  тоже самое:
*/

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}

Вот полный список значений, которые может принимать каждое из этих под-свойств:

Несколько шагов

Если анимация имеет одинаковые начальные и конечные свойства, полезно разделить запятыми значения 0% и 100% внутри @keyframes:

@keyframes pulse {
  0%, 100% {
    background-color: yellow;
  }
  50% {
    background-color: red;
  }
}

Несколько анимаций

Вы можете разделить запятыми значения, чтобы объявить несколько анимаций в селекторе. В приведенном ниже примере мы хотим изменить цвет круга в @keyframe, одновременно подталкивая его из стороны в сторону другим.

.element {
  animation: 
    pulse 3s ease infinite alternate, 
    nudge 5s linear infinite alternate;
}

Производительность

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

• transform: translate()
• transform: scale()
• transform: rotate()
• opacity

Какие свойства можно анимировать?

Если возникнет необходимость, вы можете найти большой список свойств CSS, которые можно анимировать в документации к вашему браузеру. Анимационные свойства имеют тенденцию к цветам и числам. Примером неанимаемого свойства является background-image.