Метод Window requestAnimationFrame()

Объект окна JavaScript

requestAnimationFrame()Этот метод сообщает браузеру, что вы хотите выполнить анимацию, и запрашивает браузер вызвать指定的 функцию для обновления анимации перед следующим перерисованием.

Этот метод принимает回调 в качестве параметра, который нужно вызвать перед повторной отрисовкой.

Синтаксис:

window.requestAnimationFrame(callback)

var start = null;
var element = document.getElementById('anim');
function step(timestamp) {
　　if (!start) start = timestamp;
　　var progress = timestamp - start;
　　element.style.transform = 'translateX(' + Math.min(progress / 10, 400) + 'px)';
　　if (progress < 20000) {
　　　　　window.requestAnimationFrame(step);
　　}
}
window.requestAnimationFrame(step);

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

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает метод requestAnimationFrame():

Значение параметра

Технические детали

См. также

Учебник CSS:Анимация CSS

CSS: РеференсАтрибуты анимации CSS

CSS: РеференсАтрибут задержки анимации CSS

CSS: РеференсАтрибут направления анимации CSS

CSS: РеференсАтрибут продолжительности анимации CSS

CSS: РеференсАтрибут CSS animation-fill-mode

CSS: РеференсАтрибут CSS animation-iteration-count

CSS: РеференсАтрибут CSS animation-name

CSS: РеференсАтрибут CSS animation-play-state

CSS: РеференсАтрибут CSS animation-timing-function

Объект окна JavaScript