CSS Animation Generator
Build CSS keyframe animations with presets — customize and copy the code.
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.element {
animation: bounce 0.6s ease infinite normal none;
}What It Does
CSS Animation Syntax
Available Presets
Performance Tips
Frequently Asked Questions
- What CSS properties can I animate with keyframes?
- Most visual properties can be animated: opacity, transform (translate, scale, rotate, skew), color, background-color, width, height, margin, padding, border-radius, and box-shadow. For best performance, stick to opacity and transform — these are composited by the GPU and do not trigger layout recalculation.
- What is the difference between animation-timing-function values like ease, linear, and ease-in-out?
- linear plays the animation at a constant speed. ease starts fast and slows down. ease-in starts slow and speeds up. ease-out starts fast and slows at the end. ease-in-out is slow at both ends. cubic-bezier() lets you define a fully custom curve.
- How do I make an animation loop infinitely?
- Set animation-iteration-count to infinite. In the generator, select "Infinite" for the iterations option. Example: animation: spin 1s linear infinite;
- What is animation-fill-mode and when do I need it?
- animation-fill-mode controls the element's style before the animation starts (forwards) or after it ends (backwards), or both. Use forwards to keep the final keyframe state after the animation completes. Without it, the element snaps back to its original style.
- Can I use CSS animations without JavaScript?
- Yes. CSS animations are entirely declarative — they run using only @keyframes and the animation property on a CSS selector. JavaScript is only needed if you want to trigger animations dynamically, respond to animation events, or control playback programmatically.