Guides JP

CSS Keyframes Generator

Choose a preset and adjust duration, easing, delay, iteration, and direction. Watch a live preview and copy ready-to-use @keyframes and animation CSS.

Last updated: 2026/10/16 Design Feedback & bug reports
Preview
WAZA
s
s
Generated CSS 

            


            

                
            

        

    




    
    



    
How to Use

    

        

            
1

            

                
Pick a Preset

                
Click a preset such as fade, slide, bounce, rotate, or pulse to choose the motion you want.

            

        

        

            
2

            

                
Adjust the Motion

                
Tune duration, easing, delay, iteration count, direction, and fill mode, and watch the live preview update instantly.

            

        

        

            
3

            

                
Copy the CSS

                
Copy the generated @keyframes and animation CSS with the copy button and paste it straight into your stylesheet.

            

        

    






    

        

            
About the CSS Keyframes Generator

            
A visual tool for building CSS @keyframes animations. Pick a preset, tweak parameters like duration and easing, and get ready-to-use CSS alongside a live preview. Everything runs entirely in your browser and nothing is ever sent to a server.

        

        

            
Features

            
    
                
  • Rich Preset LibraryApply classic animations such as fade, slide, zoom, bounce, pulse, shake, and rotate with a single click.
    • 
                
  • Real-time PreviewEvery change is reflected in the preview instantly, and you can replay the motion as many times as you like.
    • 
                
  • Ready-to-use CSSOutputs the @keyframes rule and animation shorthand together — copy and paste it into your stylesheet and it just works.
    • 
                
  • Privacy ProtectedAll processing happens in your browser with no external libraries and no data sent to servers.
    • 
            

        

        

            
Use Cases

            
    
                
  • Hover and entrance animations for buttons and cards
    • 
                
  • Display effects for hero sections and logos
    • 
                
  • Building loading spinners and pulse effects
    • 
                
  • Slide-in transitions for modals and toasts
    • 
                
  • Learning and testing CSS animations
    • 
            

        

    






    
FAQ

    

        
Is the CSS Keyframes Generator free to use?
Yes, it is completely free. No registration required — just open it in your browser and start creating.

        
Can I copy and use the generated CSS directly?
Yes. It outputs the @keyframes rule and animation property together, so you can copy it and paste it onto your target element selector. You can also rename the animation freely.

        
What is animation-fill-mode?
It defines the styles applied to an element before and after the animation runs. "forwards" keeps the final keyframe state, "backwards" applies the first keyframe before it starts, and "both" applies both — useful so a fade-in element does not snap back when it finishes.

        
Can I make the animation loop forever?
Yes. Enable "Infinite loop" to set animation-iteration-count to infinite, ideal for pulses and spinners. Uncheck it and enter a number to run the animation a fixed number of times.

        
Is my input saved on a server?
No. All processing happens locally in your browser with JavaScript, and your settings and generated CSS are never sent to or stored on any server. No external libraries are used, so you can use it with confidence.

    













    
Related Tools

    

                
            
            
                Cubic Bezier Generator
                Create CSS easing curves with live preview
            
        
                
            
            
                CSS Gradient Generator
                Visually create Linear, Radial & Conic CSS gradients
            
        
                
            
            
                Flexbox Generator
                Build flexbox layouts visually and get the CSS
            
        
            







    
Popular Tools

    

                
            
            
                Character Counter
                Count characters, words, and lines in real-time
            
        
                
            
            
                JSON Formatter
                Format and validate JSON with syntax highlighting
            
        
                
            
            
                QR Code Generator
                Create custom QR codes with logo, colors & styles
            
        
                
            
            
                Password Generator
                Generate secure random passwords with one click
            
        
                
            
            
                Base64 Encoder
                Encode and decode text or files to Base64
            
        
                
            
            
                IP Address Checker
                Check your global IP address
            
        
            







    
Related Guides

    

                
            
                Intro to CSS Animation: @keyframes, the animation Property, and vs. transition
                A beginner-friendly guide to CSS animation basics: defining motion with @keyframes, the meaning of the animation property's duration, timing-function, delay, iteration-count, and direction, the difference from transition, how to build common effects like fade and slide, and performance tips.
            
        
                
            
                How to Build a CSS Loader: Spinners, Dots, Bars, Pulses, and UX Tips
                Learn how to build CSS loaders (spinners) from the ground up: making a circle with border and border-radius, spinning it with @keyframes, dot, bar, and pulse animations, respecting prefers-reduced-motion, and UX tips on when to show a loader.