CSS transition-timing-function Property

What You’ll Learn

The transition-timing-function property controls the speed curve of a transition — whether motion starts gently, ends softly, or moves at a constant rate.

Introduction

The transition-timing-function property in CSS defines how intermediate values for CSS properties being affected by a transition are calculated. This property allows you to control the speed of the transition, making it start slowly, speed up, or slow down at different points during the transition. It is essential for creating smooth and natural animations on your web pages.

Definition and Usage

Set transition-timing-function on the base element state alongside transition-property and transition-duration. The timing function applies to both the forward transition (e.g., hover in) and the reverse (hover out).

📝 Syntax

The syntax for the transition-timing-function property is as follows:

element {
  transition-timing-function: timing-function;
}

Here, timing-function can be one of several predefined keywords, a cubic-bezier() function, or the steps() function.

Basic Example

div {
  transition: background-color 2s;
  transition-timing-function: ease-in-out;
}

div:hover {
  background-color: green;
}

Syntax Rules

• Keyword values: ease, linear, ease-in, ease-out, ease-in-out.
• Custom curves use cubic-bezier(x1, y1, x2, y2) with x values between 0 and 1.
• Stepped motion uses steps(n, start|end).
• Default is ease when omitted from shorthand.
• The property is not inherited.

Related Properties

• transition — shorthand including timing function
• transition-duration — how long the transition runs
• transition-property — which properties animate
• animation-timing-function — easing for @keyframes animations

🎯 Default Value

The default value of the transition-timing-function property is ease, which starts the transition slowly, speeds it up in the middle, and slows it down again before completion.

💎 Property Values

The transition-timing-function property accepts keywords and function values.

When to Use transition-timing-function

Pick a timing function based on how the motion should feel:

• General UI transitions — ease or ease-in-out for colors and subtle hover effects.
• Elements appearing — ease-out for menus, tooltips, and panels sliding in.
• Elements disappearing — ease-in for exits that accelerate away.
• Mechanical motion — linear for progress bars and loaders.
• Playful effects — Custom cubic-bezier with y values above 1 for slight bounce.

Examples Gallery

In this example, we’ll change the background color of a div element with a smooth transition using the ease-in-out timing function.

<style>
  div {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: background-color 2s;
    transition-timing-function: ease-in-out;
  }
  div:hover {
    background-color: green;
  }
</style>

<div></div>

.ease .bar { transition-timing-function: ease; }
.linear .bar { transition-timing-function: linear; }
.ease-in .bar { transition-timing-function: ease-in; }
.ease-out .bar { transition-timing-function: ease-out; }
.ease-in-out .bar { transition-timing-function: ease-in-out; }

.panel {
  opacity: 0;
  transition: opacity 0.45s ease-out;
}

.wrap:hover .panel {
  opacity: 1;
}

.badge {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.badge:hover {
  transform: scale(1.15);
}

♿ Accessibility

• Reduced motion — Use linear or disable transitions when prefers-reduced-motion: reduce is set.
• Avoid excessive bounce — Strong cubic-bezier overshoot can distract or disorient users.
• Do not rely on motion alone — State changes should be clear without animation.
• Focus parity — Apply the same timing functions on :focus-visible as on hover.

timing-function in the shorthand

The third value in transition: property duration timing-function delay is the timing function. If omitted, it defaults to ease.

/* Longhand */
.btn {
  transition-property: transform;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}

/* Shorthand equivalent */
.btn {
  transition: transform 0.3s ease-out;
}

💡 Best Practices