<!DOCTYPE html>
<!--
 | Demo to help test animated webp with transparent backgrounds.  Sets up
 | two different animated webp images where one renders its frames using
 | no blending when applying the new image over the existing one, and the
 | other disposes to the background (which is alpha) as it runs through its
 | frames.
 -->
<html>

<head>
  <style>
    body {
      background-color: white;
    }

    .layer {
      position: absolute;
      left: 0px;
      top: 0px;
    }

    @keyframes background-anim {
      from {
        background-color: green;
      }

      to {
        background-color: blue;
      }
    }

    .background {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      background-color: green;
      animation: background-anim 5s alternate-reverse infinite ease-in-out;
    }

    .image {
      width: 300px;
      height: 300px;
      background-size: contain;
    }
  </style>
</head>

<body>
  <div class="background"></div>

  <div class="layer">
    <!-- Image that clears each frame by overwriting the entire frame with a
         new image that has blending disabled -->
    <div class="image" style="background-image: url(bottleflip_loader.webp)">
    </div>
    <!-- Image that disposes the previous frame's rectangle to the background
         color (which contains alpha) after it finishes, requiring that the
         background color fill be done with no blending. -->
    <div class="image" style="background-image: url(webp-animated-semitransparent4.webp);">
    </div>
    <!-- Background color of image should be ignored, use canvas color instead-->
    <div class="image" style="background-image: url(loading-spinner-opaque.webp)">
    </div>
  </div>
</body>

</html>