CSS Animation Generator

Pick a preset animation, set duration and timing, then copy the complete animation property and @keyframes block in one click.

Generated CSS 

      

    

  






  

    
How to Use the CSS Animation Generator

    
Choose a preset animation from the preset buttons — the preview box immediately plays the selected animation so you can see the effect in real time. Use the Duration slider to control how long one animation cycle takes (in seconds). The Delay slider adds a pause before the animation starts. Iterations sets how many times the animation plays; enable the Infinite loop toggle to have it repeat indefinitely. Choose a Timing Function to control the acceleration curve: ease, ease-in, ease-out, ease-in-out, or linear.

    
Click Replay to replay the preview at any time. When you're satisfied, copy the complete CSS block — it includes both the animation shorthand property and the full @keyframes rule ready to paste into your stylesheet.


    
@keyframes Syntax

    
A @keyframes rule defines the states of an animation at specific points in time. Each point is expressed as a percentage (0% = start, 100% = end) or the keywords from and to. Between these waypoints, the browser interpolates property values automatically. You can define as many keyframe stops as needed — for example, a bounce animation might need stops at 0%, 30%, 60%, 80%, and 100% to create the multi-step bounce effect.

    
The @keyframes rule is referenced by name in the animation-name property (or the animation shorthand). Names are case-sensitive and can be any valid CSS identifier or quoted string.


    
animation Shorthand Properties

    
The animation shorthand packs up to eight individual sub-properties into one declaration:

    
    
      
  • animation-name — The name defined in @keyframes
    • 
      
  • animation-duration — How long one cycle takes (e.g. 1s, 500ms)
    • 
      
  • animation-timing-function — The easing curve (ease, linear, cubic-bezier(), steps())
    • 
      
  • animation-delay — Pause before start; negative values start mid-animation
    • 
      
  • animation-iteration-count — Number or infinite
    • 
      
  • animation-direction — normal, reverse, alternate, alternate-reverse
    • 
      
  • animation-fill-mode — What styles apply before/after the animation (none, forwards, backwards, both)
    • 
      
  • animation-play-state — running or paused
    • 
    


    
Timing Functions Visualized

    
ease (default) starts slow, accelerates, then slows at the end — natural and fluid for most UI animations. ease-in starts slowly and accelerates to full speed — good for elements exiting the screen. ease-out starts fast and decelerates to a stop — natural for elements entering the screen. ease-in-out is symmetric — slow start, fast middle, slow end — ideal for attention-drawing pulses. linear maintains constant speed throughout — best for continuous rotations (spinners) where easing would look odd.


    
prefers-reduced-motion

    
Users who experience motion sickness or vestibular disorders can set an OS-level preference to reduce motion. Respect this preference in your CSS with a @media query:

    
@media (prefers-reduced-motion: reduce) {
  .animated-element {
    animation: none;
    transition: none;
  }
}

    
This is not optional for accessible web development — WCAG 2.3.3 (AAA) recommends providing a way to disable non-essential animations. At minimum, avoid flashing more than three times per second and never auto-play large viewport-covering animations without a pause control.


    
Performance: transform & opacity

    
CSS animations perform best when animating only transform and opacity. These two properties can be handled entirely by the GPU compositor without triggering layout or paint. Animating any property that changes an element's size or position in the document flow (such as width, height, top, margin) causes expensive layout recalculations on every frame. All ten built-in presets in this generator use only transform and opacity for optimal 60fps performance.


    
Practical Examples

    
Page Load Fade-in

    
.hero {
  animation: fadeIn 0.8s ease both;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


    
Notification Bounce

    
.badge {
  animation: bounceIn 0.5s cubic-bezier(0.36,0.07,0.19,0.97) both;
}


    
Loading Spinner

    
.spinner {
  width: 32px; height: 32px;
  border: 3px solid rgba(108,99,255,0.2);
  border-top-color: #6c63ff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}