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.
/* 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); transition-timing-function: frames(10); /* 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;
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 cases, the CSS declaration stays valid.
Initial value | ease |
---|---|
Applies to | all elements, ::before and ::after pseudo-elements
|
Inherited | no |
Media | interactive |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
<timing-function>
<timing-function>
represents the timing function to link to the corresponding property to transition, as defined in transition-property
.<single-transition-timing-function>#where
<single-transition-timing-function> = <single-timing-function>where
<single-timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> | <frames-timing-function>where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, [ start | end ] ]?)
<frames-timing-function> = frames(<integer>)
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);
Specification | Status | Comment |
---|---|---|
CSS Transitions The definition of 'transition-timing-function' in that specification. | Working Draft | Initial definition |
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support |
26 Yes -webkit- |
12 12 -webkit- |
16 4 -moz- 49 -webkit- |
10 |
12.1 15 -webkit- 11.6 — 15 -o- |
Yes Yes -webkit- |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support |
Yes Yes -webkit- |
26 Yes -webkit- |
12 12 -webkit- |
16 4 -moz- 49 -webkit- |
? | ? |
Yes Yes -webkit- |
1. From version 44: this feature is behind the layout.css.prefixes.webkit
preference (needs to be set to true
). To change preferences in Firefox, visit about:config.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function