CSS Animations and @keyframes

While transitions respond to state changes, CSS animations run automatically — they can loop, alternate direction, and orchestrate complex multi-step sequences without JavaScript.

1. Defining an Animation with @keyframes

The @keyframes rule defines the animation's sequence of states:

/* Using from/to (0% and 100%) */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Using percentage steps */
@keyframes slide-in-bounce {
  0%   { transform: translateX(-100%); opacity: 0; }
  70%  { transform: translateX(10px);  opacity: 1; }
  85%  { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

2. Applying the Animation

.hero-title {
  animation-name:            fade-in;
  animation-duration:        0.6s;
  animation-timing-function: ease-out;
  animation-delay:           0.2s;
  animation-iteration-count: 1;       /* or 'infinite' */
  animation-direction:       normal;  /* normal | reverse | alternate | alternate-reverse */
  animation-fill-mode:       both;    /* forwards | backwards | both | none */
  animation-play-state:      running; /* running | paused (controllable with JS) */
}

/* Shorthand: name duration timing delay iterations direction fill-mode */
.hero-title {
  animation: fade-in 0.6s ease-out 0.2s 1 normal both;
}

3. animation-fill-mode — The Most Confused Property

This controls what styles apply before and after the animation runs:

Value	Before	After
none	No effect	Resets to pre-animation state
forwards	No effect	Stays at final keyframe
backwards	Applies first keyframe during delay	No effect
both	Applies first keyframe during delay	Stays at final keyframe

/* Common pattern: element starts invisible, fades in and stays visible */
.element {
  opacity: 0;                          /* Start hidden in HTML */
  animation: fade-in 0.5s ease-out forwards; /* 'forwards' keeps it visible */
}
@keyframes fade-in {
  to { opacity: 1; }
}

4. Chaining Multiple Animations

.card {
  animation:
    fade-in   0.5s ease-out 0.1s both,
    slide-up  0.5s ease-out 0.1s both,
    glow-pulse 2s ease-in-out 0.6s infinite;
}

5. Staggered Animations (The "Cascade" Effect)

Animate a list of items one-by-one using animation-delay:

.nav__item { animation: fade-in-up 0.5s ease-out both; }
.nav__item:nth-child(1) { animation-delay: 0ms; }
.nav__item:nth-child(2) { animation-delay: 80ms; }
.nav__item:nth-child(3) { animation-delay: 160ms; }
.nav__item:nth-child(4) { animation-delay: 240ms; }

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

Or set delays via CSS variables and JavaScript (for dynamic lists):

.list-item { animation: fade-in-up 0.5s ease-out calc(var(--i, 0) * 80ms) both; }

document.querySelectorAll('.list-item').forEach((el, i) => {
  el.style.setProperty('--i', i);
});

6. Common Production Animation Patterns

Loading Spinner

@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  width: 40px; height: 40px;
  border: 4px solid rgba(255,255,255,0.15);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

Pulsing Glow (Notification Dot)

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(108, 99, 255, 0.6); }
  50%       { box-shadow: 0 0 0 10px rgba(108, 99, 255, 0); }
}
.badge {
  animation: pulse-glow 2s ease-in-out infinite;
}

Typing Cursor

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.cursor::after {
  content: '|';
  animation: blink 1s step-end infinite;
}

Animated Gradient Background

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.gradient-bg {
  background: linear-gradient(-45deg, #6c63ff, #00ff87, #f5a623, #ff6b6b);
  background-size: 400% 400%;
  animation: gradient-shift 8s ease infinite;
}

7. JavaScript Animation Control

const el = document.querySelector('.animated');

// Pause/resume
el.style.animationPlayState = 'paused';
el.style.animationPlayState = 'running';

// Trigger on scroll using Intersection Observer
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    entry.target.classList.toggle('is-visible', entry.isIntersecting);
  });
}, { threshold: 0.1 });

document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));

.animate-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.6s, transform 0.6s; }
.animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

8. Performance Considerations

• Prefer transform and opacity inside keyframes — these are GPU-composited.
• animation: all ... can accidentally animate expensive properties. Name only what you need.
• Use will-change: transform, opacity; on elements that animate on page load.
• Always wrap animations in @media (prefers-reduced-motion: reduce).