CSS @keyframes & animation Shorthand

Tune every longhand property, watch the box move, and read the generated animation: shorthand update live.

Animation Builder

The preview uses @keyframes demo-motion (translate + scale + rotate). Change controls — the CSS readout and preview update instantly.

1.8s
0s
live preview
Generated CSS

        

      

    

  


  

    
Fill-mode & Direction — side by side

    
Fill-mode: after one iteration, does the element snap back (none) or hold the last frame (forwards)? Direction: alternate ping-pongs each cycle.


    

      

        
fill-mode: none — snaps to start when done

        

          

        

      

      

        
fill-mode: forwards — stays at end frame

        

          

        

      

      

        
direction: normal — always 0% → 100%

        

          

        

      

      

        
direction: alternate — reverses each cycle

        

          

        

      

    


    

      Main preview (lime)
      Direction compare (blue)
    


    

      
      
    


    
Shorthand order: name duration timing-function delay iteration-count direction fill-mode play-state. Omitted values fall back to defaults — which is why fill-mode and direction trips people up.