CSS Animation Generator

Controls

1s
0s

Preview & CSS

 
   
 
 
   
 
 
 
How to Use
 
     
  1. Select a preset — Choose Fade In, Slide Up, Bounce, or Pulse as your animation starting point.
    2.  
  2. Set duration — Adjust the slider from 0.1 to 5 seconds for speed control.
    3.  
  3. Choose timing — Select an easing function (ease, linear, cubic-bezier, etc.) to control acceleration.
    4.  
  4. Set delay & iterations — Add a delay before start and control how many times it repeats.
    5.  
  5. Pick direction & fill — Control whether the animation plays in reverse or alternates, and what state the element holds after.
    6.  
  6. Copy CSS — Get the complete @keyframes block plus the animation shorthand.
    7.  
 
 
 
What Is the CSS Animation Property?
 
The CSS animation shorthand combines eight sub-properties: name, duration, timing-function, delay, iteration-count, direction, fill-mode, and play-state. Together they drive keyframe-based animations purely in CSS — no JavaScript needed for most effects.
 
@keyframes defines the states. The animation property applies them to elements. You can layer multiple animations by comma-separating values.
 
 
 
Common Use Cases
 
 
Page entry effects
 
Loading skeletons
 
Attention-grabbing CTAs
 
Scroll reveal animations
 
Icon hover effects
 
Toast notifications
 
 
Tips & Best Practices
 
 
 Prefer transform & opacity 
Animating transform and opacity uses the compositor thread — far cheaper than animating layout properties like width or top.
 
 
 Respect motion preferences 
Wrap animations in @media (prefers-reduced-motion: no-preference) so users who prefer less motion are not affected.
 
 
 Use fill-mode: both 
fill-mode: both combines forwards and backwards — the element starts in the first keyframe state and ends in the last.
 
 
 Stagger with delay 
Apply the same animation to multiple elements with incrementally higher delays to create staggered entrance effects.
 
 
 
Frequently Asked Questions
 
 
What is the difference between animation-direction: alternate and reverse?
 
reverse plays the keyframes backwards on every cycle. alternate plays forward then backward on successive iterations, creating a ping-pong effect.
 
 
 
When should I use animation-fill-mode: forwards?
 
Use forwards when you want the element to stay in its final keyframe state after the animation completes — for example, a fade-in that should remain visible.
 
 
 
Can I animate multiple properties at once?
 
Yes. A single @keyframes block can set any number of CSS properties at each keyframe step. The Slide Up preset, for example, animates both transform and opacity simultaneously.
 
 
 
What is cubic-bezier(0.4, 0, 0.2, 1)?
 
This is Google's Material Design easing curve — a fast start with a smooth deceleration. It gives UI transitions a natural, physical feel.