Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Our volunteers haven't translated this article into Tiếng Việt yet. Join us and help get the job done!

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

Summary

The transition-timing-function CSS property is used to describe how the intermediate values of the CSS properties being affected by a transition effect are calculated. This in essence lets you establish an acceleration curve, so that the speed of the transition can vary over its duration.

This acceleration curve is defined using one <timing-function> for each property to be transitioned. 

You may specify multiple timing functions; each one will be applied to the corresponding property as specified by the transition-property property, which acts as a master list. If there are fewer functions specified than in the master list, missing values are set to the initial value (ease). If there are more timing functions, the list is simply truncated to the right size. In both case the CSS declaration stays valid.

Initial valueease
Applies toall elements, ::before and ::after pseudo-elements
Inheritedno
Mediainteractive
Computed valueas specified
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

/* Keyword values */
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

/* Function values */
transition-timing-function: steps(4, end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* Multiple timing functions */
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* Global values */
transition-timing-function: inherit;
transition-timing-function: initial;
transition-timing-function: unset;

Values

<timing-function>
Each <timing-function> represents the timing function to link to the corresponding property to transition, as defined in transition-property.

Formal syntax

<single-transition-timing-function>#
where 
<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)

Examples

transition-timing-function: ease

 <div class="parent">
  <div class="box">Lorem</div>
</div>
  
.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: ease;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: ease;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: ease;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: ease;
}

function updateTransition() {
  var el = document.querySelector("div.box");
   
  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }
   
  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);

transition-timing-function: ease-in

 <div class="parent">
  <div class="box">Lorem</div>
</div>
  
.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
     -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: ease-in;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: ease-in;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: ease-in;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: ease-in;
}

function updateTransition() {
  var el = document.querySelector("div.box");
   
  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }
   
  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);

transition-timing-function: ease-out

 <div class="parent">
  <div class="box">Lorem</div>
</div>
  
.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: ease-out;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: ease-out;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: ease-out;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: ease-out;
}

function updateTransition() {
  var el = document.querySelector("div.box");
   
  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }
   
  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);

transition-timing-function: ease-in-out

 <div class="parent">
  <div class="box">Lorem</div>
</div>
  
.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: ease-in-out;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: ease-in-out;
}

function updateTransition() {
  var el = document.querySelector("div.box");
   
  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }
   
  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);

transition-timing-function: linear

 <div class="parent">
  <div class="box">Lorem</div>
</div>
  
.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: linear;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: linear;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: linear;
}

function updateTransition() {
  var el = document.querySelector("div.box");
   
  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }
   
  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);

transition-timing-function: step-start

 <div class="parent">
  <div class="box">Lorem</div>
</div>
  
.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: step-start;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: step-start;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: step-start;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: step-start;
}

function updateTransition() {
  var el = document.querySelector("div.box");
   
  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }
   
  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);

transition-timing-function: step-end

 <div class="parent">
  <div class="box">Lorem</div>
</div>
  
.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: step-end;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: step-end;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: step-end;
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: step-end;
}

function updateTransition() {
  var el = document.querySelector("div.box");
   
  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }
   
  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);

transition-timing-function: steps(4, end)

 <div class="parent">
  <div class="box">Lorem</div>
</div>
  
.parent { width: 250px; height:125px;}
.box {
    width: 100px;
    height: 100px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: steps(4, end);
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: steps(4, end);
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 150px;
    top:25px;
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top color;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function: steps(4, end);
    transition-property: width height background-color font-size left top color;
    transition-duration:2s;
    transition-timing-function: steps(4, end);
}

function updateTransition() {
  var el = document.querySelector("div.box");
   
  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }
   
  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);

Specifications

Specification Status Comment
CSS Transitions
The definition of 'transition-timing-function' in that specification.		 Working Draft Initial definition

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 26 4.0 (2.0)-moz
16.0 (16.0)[1]		 10 11.6-o
12.10 #		 (Yes)-webkit
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes)-webkit (Yes)-webkit 4.0 (2.0)-moz
16.0 (16.0)[1]		 ? ? (Yes)-webkit

[1] In addition to the unprefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

See also

Document Tags and Contributors

Tags: 
 Contributors to this page: franciscop, Sebastianz, mrstork, fscholz, teoli, tregagnon, kscarfone, Sheppy, ethertank, CutenessOverload, yyss
 Last updated by: franciscop,