Animated Landing Page

75 minIntermediateCSSTransitions@keyframesAccessibilityResponsive design

Outcome

A polished landing page whose buttons and cards respond smoothly to hover and keyboard focus, whose hero and features glide in on load, that calms down completely for prefers-reduced-motion, and that reflows on any screen.

Learning objectives

Add smooth transitions and design :hover, :focus-visible and :active states
Write @keyframes animations and control them with duration, delay and fill mode
Respect prefers-reduced-motion so motion never makes anyone feel unwell
Make a grid reflow with a mobile-first @media query

Prerequisites

Comfortable with CSS selectors, the box model and colours — see the HTML & CSS track
Recommended: the Personal Portfolio Page project (layout and media queries)

Expected behaviour

Buttons change colour and lift slightly on hover, and show a clear focus ring when reached with the Tab key.
Feature cards rise smoothly on hover.
On load, the hero fades and slides in, then the three cards follow one after another.
With reduced motion turned on in the operating system, everything appears instantly with no movement.
Cards stack on a phone and sit in a row of three on wider screens.

Good motion is feedback, not decoration: it tells users “yes, this is clickable”, “this is where you are”, “this just arrived”. In this project the HTML and base styles are done — you'll add all the motion in style.css, one milestone at a time.

transition: Smoothly animates a property between two states, e.g. from normal to :hover.
@keyframes + animation: Plays a sequence of steps by itself — for example when the page loads.
prefers-reduced-motion: A media feature that is reduce when the user has asked their device for less motion (some people get dizzy or nauseous from animation).

Animate transform and opacity whenever you can. Browsers can animate them smoothly without recalculating the layout — animating width, top or margin is much more likely to stutter.

Entrance animations play once when the page loads. Edit any CSS (or press Run) to reload the preview and see them again.

Milestones

Give .btn a short transition (between 150ms and 300ms feels snappy) for background-color and transform. Then add:

• .btn:hover — a darker background and a tiny lift (transform: translateY(-2px)) • .btn:focus-visible — a clear outline with some outline-offset, so keyboard users can see where they are

Tab through the page in the preview to test the focus ring.

Checks

.btn has a short transition
There's a .btn:hover rule
There's a visible :focus-visible style

Completion checklist

Tick these when they're true for your project. The project completes when every milestone passes and every item is ticked.

Every hover effect also has a keyboard equivalent (:focus-visible / :focus-within)Interaction transitions are short (under ~300ms) and the whole entrance finishes within about a secondI only animated transform and opacityI turned on reduced motion in my OS (or browser DevTools → Rendering → Emulate CSS media) and the page appeared instantly with no movementThe page looks right at phone width and desktop width

Preview

Console output from your code appears here.