Skip to content
Hoover Digital Media Learning Platform

CSS Animations Recap

CSS Module 09 is complete. You started with a finished STO site that had hover transitions and no page-load animation, and you have added a full animation layer: a staggered hero entrance, cascading card reveals, and production-ready reduced-motion support. This lesson consolidates everything into a reference and closes out CSS Foundations.

The complete STO animation implementation

Section titled “The complete STO animation implementation”

Here is the full /* === Animations === */ section you built across Lessons 01–07. This is the state your style.css should be in at the end of the module.

/* === Animations === */


@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


@keyframes slideUpFade {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.06); }
}


/* STO Hero Entrance */
.hero-heading {
  animation: slideUpFade 600ms ease-out both;
}


.hero-subheading {
  animation: slideUpFade 600ms ease-out 150ms both;
}


.hero-cta {
  animation: fadeIn 500ms ease-out 300ms both;
}


/* STO Tour Card Stagger */
.tours-grid .tour-card {
  animation: slideUpFade 500ms ease-out both;
}


.tours-grid .tour-card:nth-child(2) { animation-delay: 100ms; }
.tours-grid .tour-card:nth-child(3) { animation-delay: 200ms; }
.tours-grid .tour-card:nth-child(4) { animation-delay: 300ms; }
.tours-grid .tour-card:nth-child(5) { animation-delay: 400ms; }
.tours-grid .tour-card:nth-child(6) { animation-delay: 500ms; }


/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .hero-heading,
  .hero-subheading,
  .hero-cta {
    animation: fadeIn 400ms ease-out both;
  }


  .tours-grid .tour-card,
  .tours-grid .tour-card:nth-child(2),
  .tours-grid .tour-card:nth-child(3),
  .tours-grid .tour-card:nth-child(4),
  .tours-grid .tour-card:nth-child(5),
  .tours-grid .tour-card:nth-child(6) {
    animation: none;
  }
}

Three @keyframes rules. Six animation declarations. One @media override block. That is the entire animation layer for a production homepage — intentionally small.

The concepts behind the code

Section titled “The concepts behind the code”

Transitions vs. animations. Transitions interpolate between two values in response to a state change — hover, focus, a toggled class. Animations define a named timeline in @keyframes that can run automatically, loop, and pass through any number of steps. Use transitions for interaction responses; use animations for page-load effects, looping motion, and sequenced reveals.

@keyframes is a definition. Writing a @keyframes rule does nothing on its own. It is a named template that sits in the stylesheet until applied via animation-name (or the shorthand). Multiple elements can use the same keyframe rule with different durations, delays, and directions.

The shorthand order. animation: name duration timing-function delay iteration-count direction fill-mode play-state. When two time values appear, the first is always duration, the second is always delay. Omit any value that matches its default and the shorthand stays readable — most entrance animations need only name, duration, timing-function, and fill-mode.

animation-fill-mode: both for page-load animations. Without it, elements flash visible in their normal styles before the 0% keyframe takes effect, and snap back after the animation ends. both applies the 0% keyframe during any delay period and holds the 100% keyframe after completion. For entrance animations with a delay, this is the correct value.

Stagger with :nth-child(). Apply the base animation once, then override only animation-delay on subsequent siblings. The name, duration, timing-function, and fill-mode all inherit from the base rule — one rule to update rather than six if you change the animation.

prefers-reduced-motion is not optional. Spatial motion (translate, scale, rotate) and looping animations can cause real harm to users with vestibular disorders, migraines, and other conditions. The opt-out pattern — add a reduce override block at the end of your animations section — is the minimum required before animations are production-ready. Opacity-only fades are generally safe to keep; slides and scales are the target for removal or replacement.

CSS Foundations: what you built

Section titled “CSS Foundations: what you built”

This is the ninth and final module of CSS Foundations. Here is a concise map of everything the course covered:

Module 01 — Getting Started with CSS Connected a stylesheet to HTML, learned how the cascade resolves conflicts, and wrote first rules targeting type selectors.

Module 02 — Selectors & Specificity Targeted elements precisely using type, class, ID, pseudo-class (:hover, :nth-child()), and pseudo-element (::before, ::after) selectors. Calculated specificity and understood why some rules override others.

Module 03 — The Box Model Used margin, padding, border, and box-sizing: border-box to control space inside and around every element. Understood the difference between content-box and border-box sizing.

Module 04 — Color & Typography Applied brand colors in hex, rgb, and rgba. Loaded custom fonts, built a rem-based type scale, and used text-shadow, letter-spacing, and line-height to control how text reads.

Module 05 — Layout with Flexbox and Grid Arranged elements in one dimension with display: flex, justify-content, align-items, flex-wrap, and flex: 1. Built the horizontal navigation, the card grid, and the centered hero layout. Introduced CSS Grid for two-dimensional layouts.

Module 06 — Styling Forms Removed browser default styles from inputs, buttons, and selects. Styled focus states accessibly, built form layouts with Flexbox, and applied validation state styling.

Module 07 — Responsive Design Added the viewport meta tag, wrote mobile-first breakpoints with @media (min-width: ...), and used clamp() for fluid type that scales without breakpoints.

Module 08 — Styling Summit Trail Outfitters End-to-End Built the complete STO site from scratch: CSS custom properties for the brand design system, sticky responsive header, full-bleed hero with overlay, tour card grid with hover transitions, blog reading typography, accessible form styles, and a multi-column footer.

Module 09 — CSS Animations Added the animation layer: @keyframes definitions, the animation shorthand and all eight sub-properties, reusable animation patterns (spinner, pulse, shimmer, slide-in), the STO hero staggered entrance, the tour card cascade, and prefers-reduced-motion support.

Final exercise

Section titled “Final exercise”

Before moving on, do a complete animation audit of the STO site:

  1. Open index.html. Reload and watch the hero section. The heading should slide up and fade in first, the subheading 150ms later, the CTA button 300ms later. No element should flash visible before its animation starts.

  2. Scroll to the featured tours section and reload. The three cards should arrive in a visible cascade — each card slightly after the one before it.

  3. Open tours.html. Reload and watch the full tour card grid. Up to six cards should stagger in.

  4. Open Chrome DevTools → Rendering → “Emulate CSS media feature prefers-reduced-motion” and set it to reduce. Reload index.html. The hero elements should fade in together (no slide, no stagger). The tour cards should appear immediately. No spatial motion should occur anywhere on the page.

  5. Clear the emulated preference and reload. The original animations should be fully restored.

  6. Verify the hover transitions still work with no interference from the entrance animations: hover a tour card after the page has loaded for more than one second. It should lift cleanly.

If any step fails, cross-reference your style.css against the complete code block at the top of this lesson.

Deploying to GitHub Pages

Section titled “Deploying to GitHub Pages”

The STO site is plain HTML, CSS, and JavaScript — no build step. If you deployed after HTML Foundations, you already have a live URL. To publish the CSS updates, just push:

Terminal window
git add .
git commit -m "add CSS styles and animations"
git push

If this is your first deployment:

Terminal window
git init
git branch -m main
git add .
git commit -m "initial commit"
git remote add origin https://github.com/<your-username>/summit-trail-outfitters.git
git push -u origin main

Then go to Settings → Pages, set the branch to main, folder to / (root), and save. Your site will be live at https://<your-username>.github.io/summit-trail-outfitters/.

What comes next

Section titled “What comes next”

CSS Foundations is complete. You have the skills to build and style a professional multi-page website — layout, typography, responsive design, custom properties, transitions, and animations.

JavaScript Foundations picks up exactly where this course ends. In the STO context, JavaScript Foundations will add:

  • A hamburger menu toggle for the mobile navigation (JavaScript adds and removes a class; your CSS transition handles the animation)
  • A tour category filter that shows and hides cards dynamically
  • A photo gallery lightbox
  • Contact form validation with real-time feedback
  • Scroll-triggered card reveals using the Intersection Observer API — the JavaScript counterpart to the CSS stagger you built in Lesson 06

The animation skills from this module carry directly into JavaScript Foundations. The @keyframes rules do not change; JavaScript controls when animation classes are added to elements rather than having them run unconditionally on page load. The CSS work is done.

Start JavaScript Foundations →