CSS Animation / Keyframes Generator

Bounce, Fade, Pulse, Rotate • Visual Timeline • Export @keyframes

Animation Type
Duration1s
Live Preview
CSS Code

                    

                

            

                    
        

    


    
    

    
    

    
    

        

            
 About

            
 Contact

        

        

            
About CSS Animation / Keyframes Generator

            
This tool builds a CSS @keyframes animation visually, using a simple percentage-based timeline — add or remove stops, drag each one to a position along the animation's duration, and set its intensity (opacity for fade, height for bounce, scale for pulse, or rotation angle for rotate). Pick a preset to start from a sensible default for that animation type, then adjust duration, timing function, repeat count, and direction. The live preview updates and replays automatically, and the finished @keyframes plus the matching animation rule are ready to copy. All processing happens locally in your browser.