meet it

A sets the speed; a sets the start.

A transition can change speed as it goes. Its timing function is the speed curve: ease starts gently and slows at the end, linear keeps one steady speed, and ease-in-out is gentle at both ends.

A second time in the value is the delay, how long it waits before starting: .

opacity sets how solid something looks, from 0, invisible, to 1, fully solid. It is a favourite thing to transition.

<img class="photo" src="cat.svg" alt="A sleepy cat">

.photo {
  width: 160px;
  opacity: 0.6;
  transition: opacity 0.4s ease-in-out 0.1s;
}
.photo:hover {
  opacity: 1;
}

Press show my page to see it here.

Point at the photo: after a short wait it brightens to fully solid.

guess first

Two times in one `transition`. Which is which?

Guess before you run it. Wrong guesses are how you learn, and nothing is marked.

<a class="link" href="https://example.com/games">Games</a>

.link {
  color: navy;
  transition: color 0.2s linear 1s;
}
.link:hover {
  color: crimson;
}

your turn

Your turn. Fade in the caption.

Give the caption's transition a steady linear speed and a delay from 0.1s to 0.5s, so it waits before fading in.

the page you’re styling

<div class="card">
  <img src="tree.svg" alt="An oak tree">
  <p class="caption">This oak is 300 years old.</p>
</div>

your css

Your code

Press show my page to see it here.

the caption starts invisiblenot checked yet
the fade has a steady speednot checked yet
it waits from 0.1s to 0.5snot checked yet

fix it

The bubble should wait 2s, then fade in fast. Fix it!

the page you’re styling

<p class="help">Point here for help <span class="bubble">Ask at the front desk</span></p>

your css

Broken code to fix

Press show my page to see it here.

the fade takes 0.2snot checked yet
it waits 2s firstnot checked yet

Which of the two times does the browser treat as the duration?
The first time is always the duration, and the second is the delay.
Swap them round to 0.2s 2s, then press run.

nailed it

you set the speed and the start. :D

The timing function sets a transition's speed curve.
The first time is the duration, the second the delay.
opacity runs from 0, invisible, to 1, solid.

new words in your collection

timing function
delay
opacity

This lesson isn’t saved. A free account remembers every lesson you finish.

A timing function sets the speed; a delay sets the start.

Two times in one transition. Which is which?

Your turn. Fade in the caption.

The bubble should wait 2s, then fade in fast. Fix it!

you set the speed and the start. :D

A sets the speed; a sets the start.

Two times in one `transition`. Which is which?