KOENJP

CSS Animation Generator (@keyframes)

CSS · KEYFRAMES

Pick ready-made keyframes — fade, slide, bounce, pulse, shake, rotate, flip, zoom, heartbeat and more — then tune duration, delay, easing with cubic-bezier, iterations, direction and fill mode. Copy @keyframes, animation CSS and a reduced-motion fallback.

Pick an animation

Preview

Aa

Settings

Repeat

Easing

cubic-bezier

CSS


      
Add the class to any HTML element to animate it, for example <div class="animate">

    


    
Runs in your browser only. Nothing is uploaded.

    
Good to know. Large or flashing motion can make some people dizzy. We recommend keeping the reduced-motion code in.

  

  







  

    

      HOW TO
      
How to use

      
    
      
  1. Pick an animation — fade, bounce, shake, heartbeat and more. The preview plays right away.
    2. 
      
  2. Set the duration, delay, iterations, direction and fill mode.
    3. 
      
  3. Choose an easing or type four cubic-bezier values and watch the curve.
    4. 
      
  4. Name the class, choose whether to include the reduced-motion fallback, and copy the code.
    5. 
      

    

    

      PAIRS WELL WITH
      
Pairs well with

      
    

  

  
  

    FAQ
    
FAQ

    
When should I change fill-mode?
Use forwards or both when the element must keep its final look, such as after a fade-in. With none, it returns to its original style when the animation ends.

    
How do cubic-bezier values work?
The 1st and 3rd values (x) must be between 0 and 1. The 2nd and 4th (y) can go above 1 or below 0 — going past 1 gives a slight overshoot.

    
Why add prefers-reduced-motion code?
People who turn on reduce motion may feel dizzy with large movement. This code switches the animation off only for them.