~/css/animation-generator
CSS Animation Generator
Pick an animation such as fade in, slide up, bounce, pulse, shake, spin, zoom or flip, then set the duration, delay, easing, repeat count and direction. Replay it in the preview and copy the @keyframes and animation rule.
Using the CSS Animation Generator
Keyframes and the animation rule
An animation has two parts: @keyframes, which describes the states over time from 0% to 100%, and the animation property on an element, which says which keyframes to play, for how long, with what easing and how many times.
Fill mode
Without a fill mode the element snaps back to its normal style when the animation ends, and shows its normal style during any delay. both keeps the first frame during the delay and the last frame afterwards, which is usually what an entrance animation needs.
Durations that feel right
Small elements such as buttons and badges feel best at 150 to 300 milliseconds; larger panels at 300 to 500. Entrance animations longer than a second start to feel slow. Repeating attention-grabbers such as shake should run once or twice, not forever.
Respect reduced motion
The generated CSS includes a prefers-reduced-motion rule that turns the animation off for visitors who have asked their system to reduce motion. Keep it; motion can cause real discomfort.
Frequently asked questions
Which properties are safe to animate?
transform and opacity animate smoothly on the GPU. Animating width, height, top or left forces layout work and can stutter.
How do I trigger an animation on scroll?
Add the animated class with an IntersectionObserver when the element enters the viewport, or use CSS scroll-driven animations where supported.
Can I chain animations?
Yes. List several animations separated by commas and offset them with animation-delay.