Transition timing functions in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does the ease-in timing function do in CSS transitions?

Choose the best description of how the ease-in timing function affects the speed of a transition.

A The transition starts slowly and then speeds up towards the end.

B The transition starts quickly and then slows down towards the end.

C The transition moves at a constant speed from start to finish.

D The transition starts and ends slowly with a faster middle phase.

💡 Hint

Think about the word 'in' as the start of the transition.

The ease-in timing function causes the transition to begin slowly and then accelerate towards the end.

📝 Syntax

intermediate

Which CSS code correctly applies a cubic-bezier timing function for a transition?

Select the CSS snippet that correctly uses a cubic-bezier timing function to make a transition ease in and out.

CSS

div {
  transition: all 0.5s cubic-bezier(0.42, 0, 0.58, 1);
}

A transition: all 0.5s cubic-bezier(0.42, 0, 0.58, 1);

B transition: all 0.5s cubic-bezier(0.42 0 0.58 1);

C transition: all 0.5s cubic-bezier(0.42, 0, 0.58);

D transition: all 0.5s cubic-bezier(0.42, 0, 0.58, 1, 0);

💡 Hint

Remember the syntax requires commas between the four numbers.

The cubic-bezier function requires exactly four comma-separated numbers between 0 and 1.

❓ rendering

advanced

What visual effect will this CSS produce on a button hover?

Given the CSS below, what will the user see when they hover over the button?

CSS

button {
  background-color: blue;
  transition: background-color 1s ease-out;
}
button:hover {
  background-color: green;
}

A The button background color changes slowly at first, then speeds up to green.

B The button background color changes quickly at first, then slows down to green.

C The button background color changes instantly to green with no transition.

D The button background color changes at a constant speed to green.

💡 Hint

Think about what ease-out means for the speed of the transition.

The ease-out timing function makes the transition start fast and slow down at the end, so the color change begins quickly and finishes gently.

❓ selector

advanced

Which CSS selector targets elements with a transition timing function of linear?

Assuming you want to style only elements that have a transition-timing-function set to linear, which selector is valid?

A :is(transition-timing-function: linear)

B :has(transition-timing-function: linear)

C [transition-timing-function='linear']

D [style*='transition-timing-function: linear']

💡 Hint

Think about how to select elements by inline style attribute content.

Only attribute selectors can select elements by inline style content. Option D uses [style*='transition-timing-function: linear'] to find elements whose style attribute contains that text.

❓ accessibility

expert

How can you ensure a CSS transition with a timing function does not cause accessibility issues for motion-sensitive users?

Which approach best respects users who prefer reduced motion when using CSS transitions with timing functions?

A Use only <code>linear</code> timing functions to avoid motion issues.

B Add <code>aria-hidden="true"</code> to elements with transitions.

C @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

D Increase transition duration to make motion less noticeable.

💡 Hint

Think about how CSS can detect user preferences for reduced motion.

The prefers-reduced-motion media query allows disabling transitions for users who want less motion, improving accessibility.