Common Animations in CSS

From the CSS Animations cheat sheet · Keyframe Animations · verified Jul 2026

Common Animations

Ready-to-use animation patterns for frequent use cases

css
/* Spin */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner { animation: spin 1s linear infinite; }

/* Pulse */
@keyframes pulse {
  50% { transform: scale(1.1); }
}
.pulse { animation: pulse 2s ease infinite; }

/* Shake */
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
💡 Pulse effects draw attention to CTAs
⚡ Slide animations for smooth entrances
📌 Bounce effects add playfulness
✅ Fade animations for subtle transitions

Continue with CSS Animations

Save the full cheat sheet or work through every related task.

More CSS tasks

Back to the full CSS Animations cheat sheet