CSS animation

Posted on

Свойство 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-6399994

Доп. свойства 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;
}

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

animation-timing-function ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0))
animation-duration Xs or Xms
animation-delay Xs or Xms
animation-iteration-count X
animation-fill-mode forwards, backwards, both, none
animation-direction normal, alternate
animation-play-state paused, running, 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.

  
753

Related Posts