CSS Animation Generator

CSS Animations Guide

CSS animations let you create smooth transitions between styles using @keyframes rules. They're hardware-accelerated, performant, and require no JavaScript.

The @keyframes Rule

Define animation states at percentage points from 0% (start) to 100% (end). The browser interpolates between them:

@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.element {
  animation: fadeIn 1s ease-in-out;
}

Animation Properties

• animation-name — references the @keyframes rule
• animation-duration — how long one cycle takes (e.g., 1s, 500ms)
• animation-timing-function — speed curve (ease, linear, cubic-bezier)
• animation-delay — wait before starting
• animation-iteration-count — how many times (number or infinite)
• animation-direction — normal, reverse, alternate
• animation-fill-mode — style before/after (forwards, backwards, both)

Performance Tips

• Animate only transform and opacity for 60fps performance
• Avoid animating width, height, top, left (causes layout reflow)
• Use will-change: transform to hint the browser for optimization
• Prefer CSS animations over JavaScript for simple effects