doc_negative_playback_rate.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8">

    <style>

    div {

      background-color: lime;

      height: 100px;

    </style>

  </head>

  <body>

    <script>

    "use strict";

    const DURATION = 100000;

    const KEYFRAMES = { backgroundColor: ["lime", "red"] };

    function createAnimation(effect, className, playbackRate = -1) {

      const div = document.createElement("div");

      div.classList.add(className);

      document.body.appendChild(div);

      effect.duration = DURATION;

      effect.fill = "forwards";

      const animation = div.animate(KEYFRAMES, effect);

      animation.updatePlaybackRate(playbackRate);

      animation.play();

    createAnimation({}, "normal");

    createAnimation({}, "normal-playbackrate-2", -2);

    createAnimation({ delay: 50000 }, "positive-delay");

    createAnimation({ delay: -50000 }, "negative-delay");

    createAnimation({ endDelay: 50000 }, "positive-end-delay");

    createAnimation({ endDelay: -50000 }, "negative-end-delay");

    </script>

  </body>

</html>