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.

Practice

1. What does the CSS property transition-timing-function control?

easy

A. The speed curve of the transition animation

B. The color of the element during transition

C. The size of the element after transition

D. The delay before the transition starts

Solution

1. Step 1: Understand the property purpose

   The transition-timing-function defines how the speed of the transition changes over time, like speeding up or slowing down.

2. Step 2: Compare options to definition

   Only The speed curve of the transition animation describes controlling the speed curve of the animation, others describe unrelated properties.

3. Final Answer:

   The speed curve of the transition animation -> Option A

4. Quick Check:

   Timing function controls speed curve [OK]

Hint: Timing function = speed curve of animation [OK]

Common Mistakes:

• Confusing timing function with delay
• Thinking it changes color or size
• Mixing with transition-duration

2. Which of the following is the correct syntax to apply a linear transition timing function in CSS?

easy

A. transition-timing-function = linear;

B. transition-timing-function: linear;

C. transition-timing-function: 'linear';

D. transition-timing-function: linear()

Solution

1. Step 1: Recall CSS property syntax

   CSS properties use colon : to assign values without quotes for keywords.

2. Step 2: Check each option

   transition-timing-function: linear; uses correct syntax: property, colon, value without quotes or parentheses. Others have invalid syntax.

3. Final Answer:

   transition-timing-function: linear; -> Option B

4. Quick Check:

   Correct CSS syntax uses colon and no quotes [OK]

Hint: CSS properties use colon and no quotes for keywords [OK]

Common Mistakes:

• Using equals sign instead of colon
• Adding quotes around keywords
• Adding parentheses to keywords

3. Given the CSS below, what will be the visual effect of the transition timing function?

div {
  width: 100px;
  height: 100px;
  background: blue;
  transition: width 2s ease-in;
}
div:hover {
  width: 200px;
}

medium

A. The width will increase quickly at first, then slow down.

B. The width will increase at a constant speed.

C. The width will increase slowly at first, then speed up.

D. The width will jump instantly to 200px without animation.

Solution

1. Step 1: Understand ease-in timing function

   ease-in means the animation starts slow and speeds up towards the end.

2. Step 2: Apply to width change on hover

   When hovering, width changes from 100px to 200px over 2 seconds, starting slow and accelerating.

3. Final Answer:

   The width will increase slowly at first, then speed up. -> Option C

4. Quick Check:

   ease-in = slow start, speed up [OK]

Hint: ease-in means slow start, speed up [OK]

Common Mistakes:

• Confusing ease-in with ease-out
• Expecting constant speed
• Thinking no animation occurs

4. Identify the error in this CSS snippet:

button {
  transition-timing-function linear;
  transition-duration: 1s;
}

medium

A. Missing colon after transition-timing-function

B. Incorrect property name, should be transition-timing

C. Value linear is invalid

D. Missing semicolon after transition-duration

Solution

1. Step 1: Check CSS property syntax

   CSS properties require a colon : between property and value.

2. Step 2: Locate error in snippet

   The line transition-timing-function linear; misses the colon after the property name.

3. Final Answer:

   Missing colon after transition-timing-function -> Option A

4. Quick Check:

   Property-value pairs need colon [OK]

Hint: CSS properties always need colon between name and value [OK]

Common Mistakes:

• Omitting colon after property name
• Confusing property names
• Assuming semicolon is optional

5. You want a button's background color to change smoothly over 0.5 seconds, starting fast and slowing down at the end. Which transition-timing-function should you use?

hard

A. ease-in-out

B. ease-in

C. linear

D. ease-out

Solution

1. Step 1: Understand timing function meanings

   ease-out means the animation starts fast and slows down at the end, exactly what is needed.

2. Step 2: Compare other options

   ease-in is slow start, fast end; linear is constant speed; ease-in-out is slow start and end with fast middle.

3. Final Answer:

   ease-out -> Option D

4. Quick Check:

   Fast start, slow end = ease-out [OK]

Hint: ease-out = fast start, slow end [OK]

Common Mistakes:

• Mixing up ease-in and ease-out
• Choosing linear for smooth easing
• Assuming ease-in-out fits all cases