CSS animation generator

The timeline only speaks compositor-friendly properties: opacity, transform (translate, scale, rotate) and color. Animating those keeps frames cheap on the GPU; layout properties like width or top are left out on purpose, because animating them reflows the page on every frame. The preview mounts the generated sheet as written, including the prefers-reduced-motion block, so what you see is what ships. Drop the copied CSS on any element by adding the animated class, or rename .animated to your own selector after pasting.