What is Transition timing functions in CSS?

CSSmarkup~5 mins

Transition timing functions in CSS

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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.