CSS Animations and Transitions Guide

Transitions vs Animations

Transitions animate between two states (e.g. hover). Animations use keyframes for complex, multi-step, looping motion.

Transitions

.button {
  background: blue;
  transition: background 0.3s ease;
}
.button:hover {
  background: darkblue;  /* smoothly transitions */
}

Transition Shorthand

transition: property duration timing-function delay;
transition: transform 0.4s ease-in-out 0s;

Keyframe Animations

@keyframes slideIn {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

.box {
  animation: slideIn 0.5s ease forwards;
}

Looping & Control

animation: pulse 1s ease infinite;       /* loop forever */
animation: spin 2s linear infinite;
animation-delay: 0.5s;

Performance Tip

Animate transform and opacity — they're GPU-accelerated. Avoid animating width/top which trigger expensive layout.

FAQs

Transition or animation?

Transition for simple hover/state changes; animation for complex or looping motion. More in our CSS guides.

How do I pause an animation?

Use animation-play-state: paused;.