Ключевая анимация: метод setKeyframes()

Базовая поддержка Широко доступна

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с марта 2020 года.

Метод setKeyframes() интерфейса KeyframeEffect заменяет ключевые кадры, составляющие анимируемый KeyframeEffect новым набором ключевых кадров.

Синтаксис

setKeyframes(keyframes)

Параметры

keyframes

Объект ключевого кадра или null. Если установлено значение null, ключевые кадры заменяются последовательностью пустых ключевых кадров.

Дополнительная информация о формате объекта ключевого кадра: формат.

Возвращаемое значение

None (undefined).

Исключения

Исключение	Описание
`TypeError`	Один или несколько кадров не соответствуют нужному типу объекта, ключевые кадры не отсортированы по смещению (отсортированы по смещению), или существует ключевой кадр со смещением меньше 0 или больше 1.

Примечание: Если ключевые кадры не могут быть обработаны или имеют неправильный формат, ключевые кадры KeyframeEffect не изменяются.

Примеры

// passing an array of keyframe objects
existingKeyframeEffect.setKeyframes([
  { color: "blue" },
  { color: "green", left: "10px" },
]);

// passing an object with arrays for values
existingKeyframeEffect.setKeyframes({
  color: ["blue", "green"],
  left: ["0", "10px"],
});

// passing a single-member object
existingKeyframeEffect.setKeyframes({
  color: "blue",
});

Спецификации

Спецификация
Web Animations # dom-keyframeeffect-setkeyframes

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`setKeyframes`	84	84	63	71	13.1	84	63	60	13.4	14.0	84

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/setKeyframes