Challenge - Animated hero

Build a hero section with animations and gradients.

Animated hero skeleton

An animated hero section grabs attention on the first screen. The .hero container gets a linear-gradient background; the title slides up with an animation defined by @keyframes.

Inside @keyframes heroFade you write from and to stops; transform: translateY(...) gives the vertical motion. Assigning animation: heroFade 1.2s ease-out to .hero-title runs it. Three declarations make the title appear quietly.

Exercise Complete the hero CSS

Complete the CSS below. Give the .hero container a background: linear-gradient(135deg, #6366f1, #ec4899) gradient. Write an @keyframes heroFade block; in the from stop use transform: translateY(-30px), in the to stop use transform: translateY(0). Add animation: heroFade 1.2s ease-out to .hero-title.

Show example solution

/* hero section */
.hero {
  background: linear-gradient(135deg, #6366f1, #ec4899);
}

/* animation definition */
@keyframes heroFade {
  from { transform: translateY(-30px); }
  to { transform: translateY(0); }
}

/* title */
.hero-title {
  animation: heroFade 1.2s ease-out;
}

Test yourself

Write the animation-name value

.hero-title {
  animation-name: ____;
  animation-duration: 1.2s;
}

Show answer

.hero-title {
  animation-name: heroFade;
  animation-duration: 1.2s;
}

Match each hero piece to its meaning

@keyframes

Defines animation stops
animation-name

Animation name to run
linear-gradient

Gradient background
transform: translateY

Vertical motion
Which keywords mark the stops inside an @keyframes block?
```
@keyframes heroFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
```
- from and to
- start and end
- begin and finish
- first and last
Show answer

from and to — Correct. from marks the start, to the end; percentage values are also allowed.

Next lesson: Challenge - Pseudo-element card

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies