анимация

Это сокращение для следующих свойств CSS:

• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timeline
• animation-timing-function

/* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slide-in;

/* @keyframes duration | easing-function | delay | name */
animation: 3s linear 1s slide-in;

/* two animations */
animation:
  3s linear slide-in,
  3s ease-out 5s slide-out;

Свойство animation задаётся как одна или несколько отдельных анимаций, разделённых запятыми.

Каждая отдельная анимация задаётся как:

• ноль, один или два вхождения значения <time>

• ноль или одно вхождение следующих значений:

  • <single-easing-function>
  • <single-animation-iteration-count>
  • <single-animation-direction>
  • <single-animation-fill-mode>
  • <single-animation-play-state>

• необязательное имя анимации, которое может быть none, <custom-ident> или <string>

<single-easing-function>

Определяет тип перехода. Значение должно быть одним из доступных в <easing-function>.

<single-animation-iteration-count>

Количество раз воспроизведения анимации. Значение должно быть одним из доступных в animation-iteration-count.

<single-animation-direction>

Направление воспроизведения анимации. Значение должно быть одним из доступных в animation-direction.

<single-animation-fill-mode>

Определяет, как стили должны применяться к цели анимации до и после её выполнения. Значение должно быть одним из доступных в animation-fill-mode.

<single-animation-play-state>

Определяет, воспроизводится ли анимация или нет. Значение должно быть одним из доступных в animation-play-state.

Порядок значений времени в каждом определении анимации важен: первое значение, которое можно разобрать как <time>, назначается animation-duration, а второе – animation-delay.

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

Хотя имя анимации должно быть задано для её применения, все значения сокращения animation являются необязательными и по умолчанию равны начальному значению для каждого компонента animation. Начальное значение animation-name равно none, что означает, если в сокращении animation-name для свойства animation не указано значение, нет анимации для применения к каким-либо свойствам.

Когда значение animation-duration опущено из сокращения animation свойства, значение по умолчанию для этого свойства – 0s. В этом случае анимация всё ещё произойдёт (animationStart и animationEnd события будут сгенерированы), но анимация не будет видна.

В случае значения animation-fill-mode forwards, анимированные свойства ведут себя так, как будто включены в наборе значений свойства will-change. Если новый контекст стека создается во время анимации, целевой элемент сохраняет контекст стека после завершения анимации.

Мерцающая анимация может быть проблематичной для людей с когнитивными проблемами, такими как синдром дефицита внимания и гиперактивности (СДВГ). Кроме того, некоторые виды движения могут быть триггером для вестибулярных расстройств, эпилепсии, мигрени и светочувствительности.

Рассмотрите возможность предоставления механизма для приостановки или отключения анимации, а также использования Media query для уменьшения движения для создания дополнительного опыта для пользователей, которые выразили предпочтение к уменьшению анимации.

• Designing Safer Web Animation For Motion Sensitivity · Статья An A List Apart
• An Introduction to the Reduced Motion Media Query | CSS-Tricks
• Responsive Design for Motion | WebKit
• MDN Понимание WCAG, объяснения к руководству 2.2
• Понимание критерия успеха 2.2.2 | W3C Понимание WCAG 2.0

animation = 
  <single-animation>#  

<single-animation> = 
  <time [0s,∞]>                       ||
  <easing-function>                   ||
  <time>                              ||
  <single-animation-iteration-count>  ||
  <single-animation-direction>        ||
  <single-animation-fill-mode>        ||
  <single-animation-play-state>       ||
  [ none | <keyframes-name> ]         

<easing-function> = 
  <linear-easing-function>        |
  <cubic-bezier-easing-function>  |
  <step-easing-function>          

<single-animation-iteration-count> = 
  infinite        |
  <number [0,∞]>  

<single-animation-direction> = 
  normal             |
  reverse            |
  alternate          |
  alternate-reverse  

<single-animation-fill-mode> = 
  none       |
  forwards   |
  backwards  |
  both       

<single-animation-play-state> = 
  running  |
  paused   

<keyframes-name> = 
  <custom-ident>  |
  <string>        

<linear-easing-function> = 
  linear      |
  <linear()>  

<cubic-bezier-easing-function> = 
  ease              |
  ease-in           |
  ease-out          |
  ease-in-out       |
  <cubic-bezier()>  

<step-easing-function> = 
  step-start  |
  step-end    |
  <steps()>   

<linear()> = 
  linear( [ <number> && <percentage>{0,2} ]# )  

<cubic-bezier()> = 
  cubic-bezier( [ <number [0,1]> , <number> ]#{2} )  

<steps()> = 
  steps( <integer> , <step-position>? )  

<step-position> = 
  jump-start  |
  jump-end    |
  jump-none   |
  jump-both   |
  start       |
  end         

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

<div class="sun"></div>

:root {
  overflow: hidden; /* hides any part of the sun below the horizon */
  background-color: lightblue;
  display: flex;
  justify-content: center; /* centers the sun in the background */
}

.sun {
  background-color: yellow;
  border-radius: 50%; /* creates a circular background */
  height: 100vh; /* makes the sun the size of the viewport */
  aspect-ratio: 1 / 1;
  animation: 4s linear 0s infinite alternate sun-rise;
}

@keyframes sun-rise {
  from {
    /* pushes the sun down past the viewport */
    transform: translateY(110vh);
  }
  to {
    /* returns the sun to its default position */
    transform: translateY(0);
  }
}

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

<div class="sun"></div>

:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  animation: 4s linear 0s infinite alternate animating-multiple-properties;
}

/* it is possible to animate multiple properties in a single animation */
@keyframes animating-multiple-properties {
  from {
    transform: translateY(110vh);
    background-color: red;
    filter: brightness(75%);
  }
  to {
    transform: translateY(0);
    background-color: orange;
    /* unset properties i.e. 'filter' will revert to default values */
  }
}

Здесь изображено солнце, которое восходит и заходит на светло-голубом фоне. Солнце постепенно меняет цвета радуги. Временные параметры положения и цвета солнца независимы.

<div class="sun"></div>

:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  /* multiple animations are separated by commas, each animation's parameters are set independently */
  animation:
    4s linear 0s infinite alternate rise,
    24s linear 0s infinite psychedelic;
}

@keyframes rise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes psychedelic {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

Здесь желтое солнце на светло-голубом фоне. Солнце перемещается между левой и правой сторонами области просмотра. Солнце остается в области просмотра, даже если определена анимация восхода. Свойство преобразования анимации восхода «перезаписывается» анимацией прыжка.

<div class="sun"></div>

:root {
  overflow: hidden;
  background-color: lightblue;
  display: flex;
  justify-content: center;
}

.sun {
  background-color: yellow;
  border-radius: 50%;
  height: 100vh;
  aspect-ratio: 1 / 1;
  /*
    animations declared later in the cascade will override the
    properties of previously declared animations
  */
  /* bounce 'overwrites' the transform set by rise, hence the sun only moves horizontally */
  animation:
    4s linear 0s infinite alternate rise,
    4s linear 0s infinite alternate bounce;
}

@keyframes rise {
  from {
    transform: translateY(110vh);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes bounce {
  from {
    transform: translateX(-50vw);
  }
  to {
    transform: translateX(50vw);
  }
}

См. Использование анимаций CSS для дополнительных примеров.

• Использование анимаций CSS
• JavaScript AnimationEvent API