Форматы ключевых кадров

Element.animate(), KeyframeEffect() и KeyframeEffect.setKeyframes() принимают объекты, отформатированные для представления набора ключевых кадров. Ниже описаны различные варианты формата.

Существует два способа форматирования ключевых кадров:

1. Массив объектов (ключевых кадров), содержащих свойства и значения для итерации. Это канонический формат, возвращаемый методом getKeyframes().

   element.animate(
     [
       {
         // from
         opacity: 0,
         color: "#fff",
       },
       {
         // to
         opacity: 1,
         color: "#000",
       },
     ],
     2000,
   );
   

   Смещения для каждого ключевого кадра могут быть указаны, используя значение offset.

   element.animate(
     [{ opacity: 1 }, { opacity: 0.1, offset: 0.7 }, { opacity: 0 }],
     2000,
   );
   

   Примечание: значения offset (если указаны), должны быть в диапазоне от 0,0 до 1,0 (включительно) и расположены в порядке возрастания.

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

   Замедление/ускорение между ключевыми кадрами может быть указано, используя значение easing, как показано ниже.

   element.animate(
     [
       { opacity: 1, easing: "ease-out" },
       { opacity: 0.1, easing: "ease-in" },
       { opacity: 0 },
     ],
     2000,
   );
   

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

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

   element.animate(
     {
       opacity: [0, 1], // [ from, to ]
       color: ["#fff", "#000"], // [ from, to ]
     },
     2000,
   );
   

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

   element.animate(
     {
       opacity: [0, 1], // offset: 0, 1
       backgroundColor: ["red", "yellow", "green"], // offset: 0, 0.5, 1
     },
     2000,
   );
   

   Вместе со значениями свойств могут быть указаны специальные ключи offset, easing, и composite (описанные ниже).

   element.animate(
     {
       opacity: [0, 0.9, 1],
       offset: [0, 0.8], // Shorthand for [ 0, 0.8, 1 ]
       easing: ["ease-in", "ease-out"],
     },
     2000,
   );
   

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

   Если значений easing или composite недостаточно, соответствующий список будет повторяться по необходимости.

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

let rotate360 = [{ transform: "rotate(360deg)" }];

Мы указали только конечное состояние анимации, а начальное состояние подразумевается.

Ключевые кадры задают пары свойство-значение для CSS-свойств, подлежащих анимации. Имена свойств указаны с использованием кемел-кейс так, например, background-color превращается в backgroundColor , а background-position-x — в backgroundPositionX. Также допускаются сокращенные значения, такие как margin.

Есть два исключительных CSS-свойства:

• float, которое должно быть записано как cssFloat , так как «float» — зарезервированное слово в JavaScript. Оно приведено здесь только для справки, оно не повлияет на анимацию, так как «float» — не анимируемое CSS-свойство.
• offset, которое должно быть записано как cssOffset , так как «offset» обозначает смещение ключевого кадра, как описано ниже.

Также могут быть указаны следующие специальные атрибуты:

offset

Смещение ключевого кадра, заданное числом в диапазоне от 0.0 до 1.0 включительно или null. Это эквивалентно указанию начального и конечного состояний в процентах в CSS-стилях, используя @keyframes. Если это значение null или отсутствует, ключевой кадр будет равномерно распределен между смежными ключевыми кадрами.

easing

Функция замедления/ускорения, используемая от этого ключевого кадра до следующего в серии.

composite

Операция KeyframeEffect.composite, используемая для объединения значений, указанных в этом ключевом кадре, со значением по умолчанию. Это будет auto , если используется операция композиции, указанная в эффекте.

• API анимации веб-страниц
• Element.animate()
• KeyframeEffect()
• KeyframeEffect.setKeyframes()