Skip to content
Retr0 Academy
CSS

CSS · 3 min read

Responsive Design and Animation

Make pages work on every screen with media queries, then bring them to life with transitions, transforms, and keyframe animations.

The timing function changes how an animation feels.
The timing function changes how an animation feels.

Responsive design

A responsive site adapts to any screen: phone, tablet, laptop, or giant monitor. It rests on three things:

  1. The viewport meta tag in your HTML:

html

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  1. Fluid layouts using %, fr, rem, max-width, Flexbox, and Grid.
  2. Media queries to change styles at certain screen sizes.

Media queries

css

/* Mobile-first: base styles are for small screens */
.layout {
  display: grid;
  grid-template-columns: 1fr;
}
 
/* When the screen is at least 768px wide */
@media (min-width: 768px) {
  .layout {
    grid-template-columns: 250px 1fr;
  }
}

User preference queries

css

@media (prefers-color-scheme: dark) {
  body { background: #0f172a; color: #e2e8f0; }
}
 
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

Responsive images

css

img {
  max-width: 100%;
  height: auto;
}

This single rule stops images from overflowing their container on small screens.

CSS variables (custom properties)

Variables keep colors and sizes consistent, and they make theming easy:

css

:root {
  --brand: #1572B6;
  --radius: 12px;
}
.button {
  background: var(--brand);
  border-radius: var(--radius);
}

Transitions

A transition animates a change between two states smoothly:

css

.button {
  background: var(--brand);
  transition: background 0.3s ease, transform 0.2s ease;
}
.button:hover {
  background: #0d4f80;
  transform: translateY(-3px);
}

Transforms

transform moves, rotates, scales, or skews an element without affecting the layout around it:

css

.a { transform: translateX(20px); }
.b { transform: rotate(15deg); }
.c { transform: scale(1.2); }
.d { transform: translate(-50%, -50%) rotate(45deg); }

Keyframe animations

For animations with multiple steps or that loop, define @keyframes:

css

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.logo {
  animation: float 3s ease-in-out infinite;
}

Project: a responsive, animated course card

<section class="grid">
<article class="card">
  <div class="icon">🎨</div>
  <h3>CSS Basics</h3>
  <p>Style anything with selectors, colors and the box model.</p>
  <a class="btn" href="#">Start lesson</a>
</article>
<article class="card">
  <div class="icon">📐</div>
  <h3>Layouts</h3>
  <p>Master Flexbox and Grid to build any layout you can imagine.</p>
  <a class="btn" href="#">Start lesson</a>
</article>
<article class="card">
  <div class="icon">✨</div>
  <h3>Animation</h3>
  <p>Bring interfaces to life with transitions and keyframes.</p>
  <a class="btn" href="#">Start lesson</a>
</article>
</section>

Edit this example in the Playground.

Open in Playground

Summary

  • Responsive design = viewport meta tag + fluid layouts + media queries.
  • Write mobile-first CSS with min-width queries.
  • CSS variables (--name and var(--name)) keep designs consistent.
  • Use transitions for state changes and @keyframes for multi-step animations; respect prefers-reduced-motion.
Open in Playground

Saved in this browser.

CSS GridQuiz