bhylu.com

Advertisements

DOM Animations

The Web Animations API animates element properties without rebuilding the DOM. Respect a reduced-motion preference.

Where to run this

This example changes a document. Open it in the HTML playground, then select Run code. It runs inside a separate preview.

A practical example

HTML + JavaScript
Try in playground

<p id="card">Repair club</p>
<button id="animate" type="button">Animate</button>
<script>
  document.getElementById("animate").addEventListener("click", () => {
    if (matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    document.getElementById("card").animate([{opacity: 0.3}, {opacity: 1}], {duration: 500});
  });
</script>

What happens

The text fades in when the button is pressed, unless reduced motion is preferred.