css_animation.html | Explore in Territory

<html>
  <head>
    <style>
    .animated {
      left:0px;
      width: 100px;
      height: 100px;
      background-color: red;
      animation-name: anim;
      animation-duration: 0.25s;
      position: relative;
    }

    /* Standard syntax */
    @keyframes anim {
      0%   {background-color:red; left:0px; top:0px;}
      25%  {background-color:yellow; left:200px; top:0px;}
      50%  {background-color:blue; left:200px; top:200px;}
      75%  {background-color:green; left:0px; top:200px;}
      100% {background-color:red; left:0px; top:0px;}
    }
    </style>
    <title>a document</title>
  </head>
  <body>
    <div class="animated" id="animated">hello</div>
    <script>
      let animated = document.getElementById('animated');
      let isStarted = false;
      animated.addEventListener('animationstart', function() {
        isStarted = true;
      });
      animated.addEventListener('animationend', function() {
        document.title = 'animation finished';
      });

      // Indicates that no animation has run within a second of document load.
      setTimeout(function() {
        if (!isStarted)
          document.title = 'animation never started';
      }, 1000);
    </script>
  </body>
</html>
chromium/fuchsia_web/webengine/test/data/css_animation.html
