Here you go - problem solved - maybe? This link shows animated transparent webp: https://static.crowdwave.link/transparentanimatedwebp.html https://static.crow

Here you go - problem solved - maybe? This link shows animated transparent webp: https://static.crowdwave.link/transparentanimatedwebp.html https://static.crowdwave.link/transparentanimatedwebp.html Seems to work on Chrome, Firefox and Safari. The video file is here: https://static.crowdwave.link/transparentanimatedwebp.webp https://static.crowdwave.link/transparentanimatedwebp.webp I put the result of the code below here: This python program will generate webp frames and if you have ffmpeg will convert them to transparent animated webp: from PIL import Image, ImageDraw import random import subprocess # Image parameters width, height = 640, 480 frames = 1000 shapes = 10 def random_color(): # Generate a random RGBA color with varying levels of transparency (alpha) return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255), random.randint(50, 200)) def random_position(): return random.randint(0, width - 80), random.randint(0, height - 80) def random_size(): return random.randint(20, 80) def create_gradient(width, height): base = Image.new('RGBA', (width, height)) top = Image.new('RGBA', (width, height)) for y in range(height): alpha = int((y / height) * 255) # Alpha varies from 0 to 255 for x in range(width): top.putpixel((x, y), (255, 255, 255, alpha)) # White gradient return Image.alpha_composite(base, top) # Create a series of images for i in range(frames): # Create an image with a transparent gradient background img = create_gradient(width, height) draw = ImageDraw.Draw(img) for _ in range(shapes): shape_type = random.choice(['rectangle', 'ellipse']) x1, y1 = random_position() x2, y2 = x1 + random_size(), y1 + random_size() color = random_color() if shape_type == 'rectangle': draw.rectangle([x1, y1, x2, y2], fill=color) elif shape_type == 'ellipse': draw.ellipse([x1, y1, x2, y2], fill=color) # Save each frame as a PNG file img.save(f'frame_{i:04d}.png') print("Frames created successfully.") # Create an animated WebP from the generated frames subprocess.run([ 'ffmpeg', '-y', '-i', 'frame_%04d.png', '-vf', 'fps=30,scale=320:-1:flags=lanczos', '-loop', '0', '-pix_fmt', 'yuva420p', 'output.webp' ]) print("Animated WebP created successfully.") Then put the output.webp and this index.html on your local disk somewhere and load the index.html in a browser. Pull the slider to change the background so you can see it is transparent. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animated WebP Display with Background Image</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-image: url('transparentanimatedwebp.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; } img { max-width: 100%; height: auto; } </style> </head> <body> <img src="transparentanimatedwebp.webp" alt="Animated WebP"> </body> </html>