Bird
Raised Fist0
CSSmarkup~5 mins

Transition timing functions in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Transition timing functions control how a CSS animation speeds up or slows down. They make changes look smooth and natural.

When you want a button to smoothly change color when hovered.
When you want a menu to slide open with a gentle speed change.
When you want an image to grow or shrink smoothly on click.
When you want to make page elements appear or disappear with a nice flow.
Syntax
CSS
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | steps(n, start|end);

ease is the default and starts slow, speeds up, then slows down.

You can create custom speeds with cubic-bezier or step changes with steps.

Examples
Starts slow, speeds up in the middle, then slows down at the end.
CSS
transition-timing-function: ease;
Changes happen at a constant speed from start to finish.
CSS
transition-timing-function: linear;
Starts slow and speeds up towards the end.
CSS
transition-timing-function: ease-in;
A custom speed curve you can create for unique effects.
CSS
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
Sample Program

This page shows four blue boxes stacked vertically, each with a label below. Each box uses a different transition timing function for scaling up when hovered or focused. You can see how the speed changes feel different for each box.

Keyboard users can also focus on each box using Tab key, making it accessible.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Transition Timing Functions Demo</title>
<style>
  body {
    font-family: Arial, sans-serif;
    padding: 2rem;
    background-color: #f0f0f0;
  }
  .box {
    width: 150px;
    height: 150px;
    margin: 1rem;
    background-color: #4a90e2;
    border-radius: 0.5rem;
    display: inline-block;
    transition-property: transform;
    transition-duration: 1.5s;
    cursor: pointer;
  }
  .ease {
    transition-timing-function: ease;
  }
  .linear {
    transition-timing-function: linear;
  }
  .ease-in {
    transition-timing-function: ease-in;
  }
  .ease-out {
    transition-timing-function: ease-out;
  }
  .box:hover, .box:focus {
    transform: scale(1.5);
  }
  .label {
    text-align: center;
    margin-top: 0.5rem;
    font-weight: bold;
    color: #333;
  }
</style>
</head>
<body>
  <div>
    <div class="box ease" tabindex="0" aria-label="Box with ease timing function"></div>
    <div class="label">ease</div>
  </div>
  <div>
    <div class="box linear" tabindex="0" aria-label="Box with linear timing function"></div>
    <div class="label">linear</div>
  </div>
  <div>
    <div class="box ease-in" tabindex="0" aria-label="Box with ease-in timing function"></div>
    <div class="label">ease-in</div>
  </div>
  <div>
    <div class="box ease-out" tabindex="0" aria-label="Box with ease-out timing function"></div>
    <div class="label">ease-out</div>
  </div>
</body>
</html>
OutputSuccess
Important Notes

Use transition-timing-function with transition-property and transition-duration for smooth animations.

Try different timing functions to see which feels best for your design.

Remember to test animations for accessibility and avoid too fast or too slow transitions.

Summary

Transition timing functions control the speed curve of CSS animations.

Common values include ease, linear, ease-in, and ease-out.

They help make changes look smooth and natural on your webpage.

Practice

(1/5)
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