This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The commitStyles()
method of the Web Animations API's Animation
interface commits the end styling state of an animation to the element being animated, even after that animation has been removed. It will cause the end styling state to be written to the element being animated, in the form of properties inside a style
attribute.
Syntax
animation.commitStyles();
Parameters
None.
Return value
None.
Examples
const divElem = document.querySelector('div'); document.body.addEventListener('mousemove', evt => { let anim = divElem.animate( { transform: `translate(${ evt.clientX}px, ${evt.clientY}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitStyles(); });
Specifications
Specification | Status | Comment |
---|---|---|
Web Animations The definition of 'commitStyles()' in that specification. |
Working Draft |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
commitStyles | Chrome
No support
No
| Edge No support No | Firefox Full support 75 | IE No support No | Opera No support No | Safari Full support 13.1 | WebView Android No support No | Chrome Android
No support
No
| Firefox Android No support No | Opera Android No support No | Safari iOS
Partial support
13.4
| Samsung Internet Android No support No |
Legend
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- See implementation notes.
See also
- Web Animations API
Animation
for other methods and properties you can use to control web page animation.