CSS Animation Generator
Preview fade, bounce, slide, and other keyframe animations while generating the CSS
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
Play common animations (fade, slide, zoom, bounce, pulse, shake, rotate, and more) in real time as you preview them, and copy the finished CSS complete with @keyframes and animation properties. Adjust the duration, delay, easing, and iteration count with sliders and the code updates instantly.
How to use
- Pick an animation type (fade, bounce, and so on) from the tabs.
- Adjust the duration, delay, easing (timing), and iteration count while checking the preview.
- Use the 'Replay' button to watch it again from the start anytime.
- Copy the CSS below and apply it to your element with the .element class.
FAQ
- How do I use the copied CSS?
- Paste the @keyframes definition into your stylesheet and add the .element class to the element you want to animate. You can rename the class to whatever you like.
- How do I keep the before-start and after-end states?
- The generated shorthand already includes both (animation-fill-mode: both), so it holds the first frame before playing and the last frame after finishing.
- I only want it to play when the element is visible on screen.
- Use IntersectionObserver to detect scroll visibility and add the .element class at that moment. The CSS this tool generates uses standard properties and works as-is, but the actual trigger logic is reference code you wire up in your project.