CSS Animation/Keyframes Generator
Pick an animation style, preview it live, then copy the keyframes and animation CSS.
Advertisement
About this tool
Set iteration count to infinite for a looping animation (spin and pulse are commonly looped). Apply the generated .kf-animate class name to your own element, or rename it.
The CSS includes a prefers-reduced-motion rule that switches the animation off for people who have asked their phone or computer to reduce motion; for some people with vestibular disorders, spinning, bouncing or pulsing movement can cause dizziness or nausea. Anything that moves for more than five seconds should also have a way to pause it (WCAG 2.2.2).