Window requestAnimationFrame() method

JavaScript Window Object

requestAnimationFrame()The method tells the browser that you want to perform an animation and requests that the browser calls the specified function to update the animation before the next repaint.

This method takes a callback as a parameter to be called before the next repaint.

Syntax:

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);

Browser Compatibility

The numbers in the table specify the first browser version that fully supports the requestAnimationFrame() method:

Parameter Value

Technical Details

Related References

CSS Tutorial:CSS animation

CSS Reference:CSS animation properties

CSS Reference:CSS animation-delay property

CSS Reference:CSS animation direction property

CSS Reference:CSS animation duration property

CSS Reference:CSS animation-fill-mode property

CSS Reference:CSS animation-iteration-count property

CSS Reference:CSS animation-name property

CSS Reference:CSS animation-play-state property

CSS Reference:CSS animation-timing-function property

JavaScript Window Object