<!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>
  </div>
</body>
</html>