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.