transition-timing-function

Overview

The transition-timing-function property is used to define the speed curve of an element's transition effect. It allows control over how the transition progresses over its duration, accepting predefined and custom values for precise adjustments.

Examples and Usage

In the example below, we'll observe a series of items that have different transition-timing-function values applied to them. Upon hovering or focusing on each item, the width will change, and the transition will occur with the specified timing function.

HTML Structure

<div class="item ttf-ease">ease</div>

<div class="item ttf-ease-in">ease-in</div>

<div class="item ttf-ease-out">ease-out</div>

<div class="item ttf-ease-in-out">ease-in-out</div>

<div class="item ttf-linear">linear</div>

<div class="item ttf-steps">steps</div>

<div class="item ttf-cubic">cubic</div>

CSS Styling

/* Common styles for all items */
.item {
  width: 250px;
  background-color: #fbbf24;
  border-radius: 6px;
  text-align: center;
  padding: 10px;
  margin-bottom: 8px;

  /* Apply a transition to the width property */
  transition: width 1.5s;
}

/* Define different transition-timing-function values for each item */
.item.ttf-ease {
  transition-timing-function: ease;
}

.item.ttf-ease-in {
  transition-timing-function: ease-in;
}

.item.ttf-ease-out {
  transition-timing-function: ease-out;
}

.item.ttf-ease-in-out {
  transition-timing-function: ease-in-out;
}

.item.ttf-linear {
  transition-timing-function: linear;
}

.item.ttf-steps {
  transition-timing-function: steps(5);
}

.item.ttf-cubic {
  transition-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);
}

/* Change the width of the item when hovered or focused */
.item:hover,
.item:focus {
  width: 50%;
}

Initially, we have the common styles for all items defined under the .item selector, which includes a transition for the width property with a duration of 1.5 seconds. Each item's specific transition-timing-function is defined using additional selectors (.item.ttf-ease, .item.ttf-ease-in, etc.).

Upon hover or focus on an item, its width changes from 250px to 50% of its container, and the transition occurs with the specified timing function:

• ease: The transition starts slowly, accelerates towards the middle, and slows down towards the end. This creates a smooth animation as the width changes.

• ease-in: The transition starts slowly and gradually increases in speed until the width change is complete. This makes the animation appear as if it's "gaining momentum" over time.

• ease-out: The transition starts quickly and gradually decelerates as the width change progresses. This creates an effect where the animation appears to "lose momentum" over time.

• ease-in-out: The transition starts slowly, accelerates in the middle, and then decelerates towards the end. This creates a smooth animation that appears to "gain and lose momentum" throughout the width change.

• linear: The transition maintains a constant speed throughout the width change. This results in a uniform animation without any acceleration or deceleration.

• steps: The transition is divided into five equal intervals using the steps(5) function. The width change is held for an equal length of time at each interval, creating a stepped animation effect.

• cubic: The transition follows a custom cubic Bézier curve defined by the cubic-bezier(0.17, 0.67, 0.83, 0.67) function. This allows you to create a unique animation style that differs from the predefined values.

Note that the predefined values ease, ease-in, ease-out, ease-in-out, and linear are cubic Bézier curves under the hood. You can also notice the usage of the steps() function, which provides a different approach to easing. (see more on step values below)

Values

The transition-timing-function property accepts the following values:

Associated Properties

• transition
• transition-property
• transition-duration
• transition-delay

Tips and Tricks

• Be aware that some CSS properties are more computationally expensive to animate than others. For example, height can trigger layout changes and be slow to animate, while background-color requires repainting. transform and opacity are more efficient properties to animate.

• Test your animations on the lowest-end device targeted by your site or app, as your development machine is likely much faster.

• Use the cubic-bezier() function to create custom easing curves that match your desired animation style.

Browser Compatibility

Older versions of Chrome, Safari, Opera, and Firefox may require vendor prefixes for this property. Refer to the Useful Resources section below for more specific information.

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Useful Resources

Can I use: transition-timing-function

W3C: CSS Transitions - transition-timing-function property

Custom Cubic-Bezier Curve Generator