blob: 62d21d9642d36af5f558ab7f5c15ce69cdffe677 [file] [log] [blame]
<!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>