Create beautiful keyframe animations with live preview
CSS animations bring web interfaces to life — from subtle hover effects that provide feedback to eye-catching page transitions that guide user attention. The @keyframes rule defines the animation states, while the animation property controls timing, duration, easing, and repetition. Well-crafted animations improve usability: loading spinners indicate progress, micro-interactions confirm actions, and entrance animations guide the eye. This generator includes 16 production-ready presets covering the most common patterns: fades, slides, scales, rotations, bounces, and attention-seekers. Each animation uses GPU-accelerated properties (transform and opacity) for smooth 60fps performance. Customize every parameter and copy clean, ready-to-use CSS for your project.
Only animate transform (translate, scale, rotate) and opacity — these are GPU-accelerated and run at 60fps. Avoid animating width, height, top, left, margin, or padding — they trigger expensive layout recalculations and cause jank.
Transitions run once between two states (triggered by hover, class change, etc.). Animations can run continuously, have multiple keyframes, and don't need a trigger. Use transitions for interactive feedback, animations for autonomous movement.
ease (default) works for most cases. ease-out for entrances (elements arriving), ease-in for exits (elements leaving), linear for constant motion (spinners, progress bars). The elastic and bouncy options add playful overshoot effects.
Fill mode controls what happens before and after the animation. 'forwards' keeps the final state after completion. 'backwards' applies the first keyframe during the delay. 'both' combines both behaviors. Essential for entrance animations that should stay visible after playing.
Yes — separate multiple animations with commas: animation: fadeIn 0.5s ease, slideUp 0.5s ease. Both play simultaneously. This lets you combine entrance effects (fade + slide) for richer interactions.