CSS Animation Generator

Pick an animation, adjust the settings and copy the CSS code instantly.

Fade In
Slide Up
Slide Down
Slide Left
Slide Right
Bounce
Pulse
Spin
Shake
Zoom In

What is a CSS Animation?

CSS animations allow elements to transition between styles over time without JavaScript. They use keyframes to define the start and end states, and the animation property to control duration, timing, delay and iteration count.

CSS Animation Properties

animation-name — Name of the keyframe to use

animation-duration — How long one cycle takes

animation-timing-function — Speed curve of the animation

animation-delay — Wait time before animation starts

animation-iteration-count — How many times it repeats

animation-fill-mode — Style applied before and after animation