CSSアニメーションジェネレーター
Build CSS @keyframes animations visually · pick a preset or customise timing, transforms & easing. Copy production-ready code.
Presets
Settings
Preview
Generated CSS
How It Works
- Choose an animation preset: Select from common animations — fade, slide, bounce, spin, pulse, shake, and more.
- Customize timing and behavior: Adjust duration, delay, easing function, iteration count, and fill mode.
- Copy the CSS: The complete @keyframes definition and animation shorthand property are ready to paste into your stylesheet.
Why Use CSS Animation Generator?
CSS animations bring interfaces to life — drawing attention to key elements, providing feedback, and creating polished user experiences. Writing @keyframes rules by hand requires knowing the correct syntax, easing names, and property combinations. This generator provides curated animation presets with live previews and lets you tweak every parameter, outputting production-ready CSS without requiring JavaScript or animation libraries.
Features
- Animation presets: Fade, slide, bounce, spin, pulse, shake, flip, zoom, and more — all with live previews.
- Custom keyframes editor: Build your own keyframe animation from scratch with a visual interface.
- Timing control: Set duration (ms/s), delay, easing (linear, ease, cubic-bezier), and iteration count.
- Animation fill modes: Control forwards, backwards, both, and none fill behavior.
- No JavaScript required: All generated animations are pure CSS — no libraries or frameworks needed.
Frequently Asked Questions
What is the difference between animation and transition in CSS?
CSS transitions trigger on state changes (hover, focus, class toggle) and animate between two states. CSS animations use @keyframes to define multiple states and run independently of user interaction — they can loop, reverse, and run automatically.
What is animation-fill-mode and why does it matter?
animation-fill-mode controls whether the element retains the animation's styles before it starts (backwards), after it ends (forwards), or both. Without forwards, the element snaps back to its original style when the animation completes.
Are CSS animations performance-friendly?
Animations that use only transform and opacity are GPU-accelerated and very smooth. Avoid animating layout properties like width, height, margin, or top/left — these trigger layout recalculations and can cause jank. Stick to transform and opacity for 60 fps animations.