CSS transition-timing-function Property

Beginner
6 min read
Updated: Oct 2026
3 examples
Live preview
CSS transition-timing-function comparing ease, linear, and steps easing curves
Definition

Definition and Usage

The transition-timing-function property sets the easing curve of a transition — how the change accelerates across its transition-duration.

The initial value is ease. Keywords like linear and ease-in-out are fixed curves; cubic-bezier() and steps() let you customize. It is not inherited. Pair it with transition-property and duration, or the transition shorthand.

Baseline · Widely available.

Not deprecated. Standard-track CSS. Prefer keyword easings first; add cubic-bezier() or steps() when you need a custom feel. Respect prefers-reduced-motion for large motion.

Syntax

CSS Syntax

syntax.css
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(…) | steps(…) | initial | inherit;

Examples: ease; · linear; · cubic-bezier(0.1, 0.7, 1, 0.1); · steps(4, end);

Values

Property Values

ValueDescriptionTry it
easeDefault. Slow start, faster middle, slow endTry it
linearConstant speed from start to finishTry it
ease-in / ease-out / ease-in-outSlow start, slow end, or bothTry it
cubic-bezier()Custom curve; x1 and x2 must be 0–1Try it
steps() / step-start / step-endJump through equal stops instead of a smooth blendTry it
initial / inheritReset to ease, or take the parent valueTry it
Approach

How to Use transition-timing-function

Set what changes and how long it takes, then choose the easing curve.

  1. Set transition-property (for example transform).
  2. Set a positive transition-duration so the curve is visible.
  3. Choose an easing keyword, cubic-bezier(), or steps().
  4. Trigger a state change (hover/focus) and compare how the motion feels.
PieceRequired?Role
Property + durationYes (to see easing)Without motion time, the curve never shows
Easing valueYesShapes acceleration across the duration
State changeYesHover, focus, or class starts the transition
Multiple easingsOptionalComma list maps to transition-property order
Try it

Live Preview

Hover or focus the track. The box moves the same distance in the same time — only the easing changes.

Duration stays 1.2s. Hover or focus the track to move the box.

Track

transition-timing-function: ease

Code

CSS Examples

Each snippet focuses on transition-timing-function. Property and duration exist only so the curve is visible. Use Try It Yourself for a live editor.

Example 1 — Default Ease

Use the default curve for a natural UI move.

CSS
<style>
  .box {
    width: 48px;
    height: 48px;
    background: #2563eb;
    transition-property: transform;
    transition-duration: 1s;
    transition-timing-function: ease;
  }
  .track:hover .box,
  .track:focus-within .box {
    transform: translateX(180px);
  }
</style>

<div class="track" tabindex="0">
  <div class="box"></div>
</div>
Try It Yourself

How It Works

  1. Transition transform. The box moves with translateX on hover/focus.
  2. Give it one second. Duration makes the curve easy to feel.
  3. Use ease. Slow start, quicker middle, soft landing — the default keyword.
  4. Same distance every time. Only the speed profile changes across examples.

Example 2 — Linear Motion

Keep a constant speed from start to finish.

CSS
<style>
  .box {
    width: 48px;
    height: 48px;
    background: #2563eb;
    transition-property: transform;
    transition-duration: 1s;
    transition-timing-function: linear;
  }
  .track:hover .box,
  .track:focus-within .box {
    transform: translateX(180px);
  }
</style>

<div class="track" tabindex="0">
  <div class="box"></div>
</div>
Try It Yourself

How It Works

  1. Keep the same move. Only the timing function changes from the ease demo.
  2. Switch to linear. Speed stays even for the whole second.
  3. Compare the feel. Linear often looks more mechanical than ease.
  4. Good for progress bars. Or any motion that should not soft-land.

Example 3 — Stepped Motion

Jump through equal stops instead of a smooth blend.

CSS
<style>
  .box {
    width: 48px;
    height: 48px;
    background: #2563eb;
    transition-property: transform;
    transition-duration: 1s;
    transition-timing-function: steps(4, end);
  }
  .track:hover .box,
  .track:focus-within .box {
    transform: translateX(180px);
  }
</style>

<div class="track" tabindex="0">
  <div class="box"></div>
</div>
Try It Yourself

How It Works

  1. Use steps(n). The duration is split into n equal intervals.
  2. Here: four stops. The box jumps four times across the track.
  3. end / jump-end. The last jump lands as the transition finishes (default style).
  4. Not a blend. Stepped easing is discrete — great for frame-like effects.

Edge Cases & Pitfalls

If easing looks identical for every keyword, check these first.

duration

Needs a positive duration

With transition-duration: 0s, every timing function looks the same — instant.

bezier

cubic-bezier x values must be 0–1

The first and third parameters (x1, x2) must stay between 0 and 1. Y values may go outside that range for overshoot.

lists

Multiple easings follow transition-property

Comma-separated timing functions map in order to the property list. Too few values repeat; too many are truncated.

steps

steps() is not a smooth blend

It jumps. Use it on purpose for discrete motion; do not expect a soft ease.

a11y

Large motion can distract

Offer shorter or reduced motion under @media (prefers-reduced-motion: reduce) when transitions are large.

Compatibility

Browser Support

transition-timing-function is a browser CSS property for transition easing. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Widely available

transition-timing-function

Keyword easings, cubic-bezier(), and steps() are widely supported across modern browsers. jump-* step keywords are modern; older engines often used start/end.

97% Core support
Google Chrome 26+
Full support
Mozilla Firefox 16+
Full support
Apple Safari 9+
Full support
Microsoft Edge 12+
Full support
Opera 12.1+
Full support
Samsung Internet 1.5+
Full support
Internet Explorer 10+
Full support
transition-timing-function Widely supported

Bottom line: Safe to teach for ease, linear, ease-in/out, cubic-bezier, and classic steps. Prefer unprefixed standard syntax. It is not a runtime API.

Remember

Key Takeaways

  • Role: shape how a transition accelerates across its duration.
  • Initial value: ease — natural soft start and finish.
  • linear vs ease: constant speed versus varying speed.
  • Custom: cubic-bezier() for curves; steps() for jumps.

One line: duration sets how long; timing-function sets how the speed feels during that time.

Frequently Asked Questions

It sets the easing curve of a transition — how fast the change moves at the start, middle, and end of the duration.
The initial value is ease: slow start, faster middle, slow finish. It equals cubic-bezier(0.25, 0.1, 0.25, 1).
ease varies speed for a more natural feel. linear keeps a constant speed from start to finish.
cubic-bezier(x1, y1, x2, y2) defines a custom curve. x1 and x2 must be between 0 and 1; y values can go outside that range for overshoot.
steps(n) jumps through n equal stops instead of blending smoothly — useful for frame-like or discrete motion.
It is Baseline Widely available across modern browsers. It is a browser CSS property, not a Node.js feature.

Next: translate

Learn the individual translate transform property for moving elements.

translate tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

CSS transition-property Property CSS translate Property