Tools
Keyframes Generator
Ten animations worth using, tuned live. Each is written with translate,
scale and rotate as their own properties, and each comes with the block that turns
it off for people who asked for less motion.
Widely availablesince Mar 2018Widely availablesince Feb 2025
Why translate and not transform
translate, scale and rotate are their own properties now. An animation
that sets translate leaves the element’s rotate and scale alone, where
an animation on transform overwrites all three at once. It is the difference between an entrance
that works on a rotated badge and one that straightens it for half a second.
Entrances end, loops do not
An entrance uses both as its fill mode, so the element holds its first frame during any delay
and its last frame afterwards. A loop should be short in distance and long in time: a float of six pixels
over three seconds reads as alive, and sixty pixels over one second reads as broken.
The block at the bottom is not optional
Every copy ends with @media (prefers-reduced-motion: reduce) switching the animation off. The
element is fully visible without it, because none of these keyframes leave the resting state hidden. For
motion tied to scrolling use the scroll animation builder, and shape a
custom curve in the easing studio.