Chapter 3.4☕ 16 min read

Animations & Keyframes

Create complex animations with @keyframes and animation properties. From loading spinners to page transitions.

01Understanding Animations

CSS animations let you create complex, multi-step animations using @keyframes and animation properties. Unlike transitions (which only animate between two states), animations can have multiple keyframes.

⏰

Analogy: Just like the Nizam clock ticks with precision, CSS animations let you control every frame of an element's movement.

@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}
.box { animation: bounce 2s infinite; }

02Animation Properties

Eight animation properties give you full control:

PropertyDescription

animation-nameName of the @keyframes animation.

animation-durationTime for one cycle (e.g., 2s, 300ms).

animation-timing-functionSpeed curve (ease, linear, ease-in-out, etc.).

animation-delayDelay before animation starts.

animation-iteration-countHow many times to repeat. Use infinite for endless.

animation-directionnormal, reverse, alternate, alternate-reverse.

animation-fill-modeStyles before/after: none, forwards, backwards, both.

animation-play-statePause/resume: running, paused.

/* Shorthand: name duration timing delay iteration direction fill-mode */
.box { animation: bounce 2s ease 0s infinite alternate both; }

/* Pause on hover */
.box:hover { animation-play-state: paused; }

/* Multiple animations */
.box { animation: bounce 2s infinite, fadeIn 1s ease-out; }

03Keyframes Syntax

Keyframes define the animation sequence. Use from/to or percentage steps:

/* Simple two-step */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Multi-step */
@keyframes pulse {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.05); }
  50%  { transform: scale(1.1); }
  75%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Loading spinner */
@keyframes spin { to { transform: rotate(360deg); } }

/* Float back and forth */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%      { transform: translateY(-10px) rotate(3deg); }
  66%      { transform: translateY(5px) rotate(-2deg); }
}

04Practical Examples

Real-world animation patterns:

/* Loading spinner */
.spinner { animation: spin 1s linear infinite; }

/* Pulse button */
.btn:hover { animation: pulse 1s infinite; }

/* Fade in on page load */
.text { animation: fadeIn 1.5s ease-out; }

/* Slide in from left */
@keyframes slideIn {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.hero { animation: slideIn 0.8s ease-out; }

/* Staggered entrance — delay per child */
.child:nth-child(1) { animation: fadeIn 0.5s ease-out both; }
.child:nth-child(2) { animation: fadeIn 0.5s ease-out 0.1s both; }
.child:nth-child(3) { animation: fadeIn 0.5s ease-out 0.2s both; }

05Exercise — Animations

Practice animations below.

Try these experiments:

Create a bounce animation using @keyframes with 3 steps (0%, 50%, 100%) Use animation-direction: alternate — back-and-forth motion Make a spinner with rotate(360deg) and linear infinite Add animation-delay: 0.5s — see the pause before animation Pause animation on hover with animation-play-state: paused

Done — Key Points:

✅ @keyframes define animation steps. Use % or from/to.
✅ 8 animation properties: name, duration, timing, delay, iteration, direction, fill-mode, play-state.
✅ infinite repeats forever. alternate goes back and forth.
✅ animation-fill-mode: both keeps start/end styles before/after animation.
✅ animation-play-state: paused on hover gives user control.

Previous3.3 — Transforms 📋 All Chapters Next Chapter3.5 — CSS Variables →