Generate CSS animation keyframes visually. Create fadeIn, slideUp, bounce, rotate, and pulse animations with customizable duration, delay, and iteration count.
CSS animations allow elements to gradually transition between styles using @keyframes rules. They provide smooth, GPU-accelerated motion without JavaScript. This generator creates common animation patterns with customizable timing properties, generating both the @keyframes definition and the animation shorthand property.
Animation = @keyframes name + animation: name duration timing delay iteration direction fill-modeA CSS animation has two parts: the @keyframes rule defines the style changes at each stage (0% to 100%), and the animation property applies it to an element with timing controls. Duration sets the length, timing-function controls the easing, delay postpones start, iteration-count sets repeats, and fill-mode controls styles before/after.
| Input | Output |
|---|---|
| Type: fadeIn, Duration: 0.5s, Iteration: 1 | @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .element { animation: fadeIn 0.5s ease 0s 1 normal forwards; } |
| Type: bounce, Duration: 1s, Iteration: infinite | @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } .element { animation: bounce 1s ease 0s infinite normal forwards; } |
| Type: rotate, Duration: 2s, Iteration: infinite | @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .element { animation: rotate 2s linear 0s infinite normal forwards; } |