CSS Keyframes Builder — Visual @keyframes and Easing Curve Generator
Build @keyframes animations with move, rotate, and scale, and shape the easing on a visual cubic-bezier timeline
Build bounce, fade, and shake-style CSS `@keyframes` animations by dragging sliders, then copy the finished code straight out.
도구를 불러오는 중…
🔒 Everything runs 100% in your browser. Your files and input are never uploaded to any server.
How to use
- Adjust the animation name, duration, Y-axis movement, and scale value.
- Watch the box animate live, then copy the generated CSS.
FAQ
- How do I use this in my HTML?
- Just paste the copied `@keyframes` rule and the class CSS into your site's stylesheet.
- Can I fine-tune the cubic-bezier easing curve myself?
- Yes — drag the control points on the timeline graph to shape the acceleration and deceleration exactly how you want, and the resulting values are written straight into the CSS.
- Can I set infinite looping or reverse playback?
- Yes — set the iteration count (including infinite) and the alternate/reverse option, and the matching animation-iteration-count and animation-direction values are generated automatically.