Unit 4 · Stage 5

Smooth Transitions

Your season cards from Stage 4 already lift and change color when you hover. But try it now: the card snaps instantly from one state to the other, with no motion in between. In this stage you smooth that change with the CSS transition property, so it animates instead of jumping. Play in the editor, or press 👀 Type it with me to be guided. (pause on a highlighted word to see what it does)

📦 Quick recap. You already have season cards that lift and darken on :hover. That works, but it happens in a single instant. A transition tells the browser to animate the change over time instead of switching all at once.

1 What is a transition?

In the real world things move. They slide, speed up, and slow down. A hover that snaps instantly feels abrupt because nothing in nature jumps between two states. The CSS transition property brings that sense of motion to your page by animating the change between states instead of switching immediately.

The three parts of a transition

transition: property duration timing-function: Written together, a transition names three things: WHICH property to animate, HOW LONG it takes, and the TIMING FUNCTION that shapes how speed varies during the animation.
transition: transform 0.3s ease: Reads as "animate the transform property over 0.3 seconds, starting quickly and slowing near the end."

2 Add transition to .season

Find your .season rule in the editor and add a transition line to it. One important detail: the transition must live on the base element, not on the :hover state. If you put it only on :hover, the animation plays going in but snaps back instantly on the way out. Putting it on the base element animates both directions.

What this code means

transition: all 0.3s ease: Animates ALL changing properties at once. The keyword all is a shorthand that covers every animatable property (background-color, transform, box-shadow) so you do not have to name each one.
0.3s: 300 milliseconds, the industry standard for hover transitions. Fast enough to feel responsive, slow enough to actually see. Under 0.1s feels invisible; over 0.8s feels laggy.
ease: The timing function, the speed curve. ease starts quick and slows near the end, like a car pulling into a parking spot. It feels natural because real objects rarely move at a perfectly constant speed.

✍️ Add transition: all 0.3s ease; to your .season rule (the base rule, not :hover). Use the example below, then press ▶ Run and hover a card.

.season {
  padding: 24px 20px;
  border-radius: 10px;
  min-height: 280px;
  cursor: pointer;
  transition: all 0.3s ease;
}

🤔 Quick check before you go on

What CSS property makes a hover change animate smoothly instead of snapping? Type it, then press Submit to unlock the last steps.

3 Try different timing functions

The timing function is worth experimenting with. Change ease to each value below one at a time, then hover a card to feel the difference.

The main timing functions

linear: Constant speed from start to finish. Mechanical and robotic. Good for spinners and loops, but unnatural for hover effects.
ease-in: Starts slow, ends fast, like an object beginning to fall. Usually the wrong direction for a lift effect.
ease-out: Starts fast, ends slow, like a ball rolling to a stop. Very natural for elements moving toward you. Many designers prefer this over plain ease.
ease-in-out: Slow start, fast middle, slow end. Balanced and polished, great for things that open and close like a drawer.

Most designers use ease or ease-out for hover effects. Change yours back to ease after testing.

4 Transition specific properties

Using all is convenient, but you can also name properties one by one. That lets you give each change its own duration for finer control.

Naming each property

transition: transform 0.3s ease, ...: Each property in the list gets its own duration. Here background-color runs at 0.4s while the lift and shadow run at 0.3s, so the color trails just behind the movement for a layered feel.
all 0.3s ease: Still perfectly fine, and what most beginners and many pros use. The multi-property version is only for when you want that extra control.

.season {
  /* ...other properties... */
  transition: transform 0.3s ease,
              background-color 0.4s ease,
              box-shadow 0.3s ease;
}

5 Make it your own

Spend a few minutes experimenting, then set it back the way you like it.

Try a slower transition: change 0.3s to 0.6s, then a fast one at 0.15s.
Swap ease for ease-out and notice how the cards feel slightly more responsive.
When you are done, set it back to all 0.3s ease before moving to Stage 6.

✓ Finish this stage

To complete Stage 5, your .season rule needs a transition so the hover animates smoothly. Press Check my work when you are ready. This opens Stage 6 and lets your teacher see that you finished. In Stage 6 you replace the example content with seasonal knowledge from your own Tribal community.

YOUR CODE

PREVIEW