CSS transition-timing-function

The CSS transition-timing-function property describes how the intermediate values used during a transition will be calculated. In order words it describes transition effects like ease, linear, etc.

CSS property transition-timing-function

CSS version: CSS 3
Value: single-transition-timing-function [, single-transition-timing-function]*
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)
Initial: ease
Applies to: all elements, :before and :after pseudo elements
Inherited: no

Example – transition-timing-function

In the following code, CSS property transition-timing-function can be changed to the following values
  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • step-start
  • step-end
<style type="text/css">
div {
 width: 100px;
 background-color: lightblue;
 transition-property: width;
 transition-duration: 2s;
 transition-timing-function: ease;
div:hover {
 width: 200px;

  Hover me to see transition of width
transition-timing-function refresh


Specification and Browser compatibility

CSS3 TransitionsW3C Working DraftCSS3
Yes 26+ Yes 16+ Yes 10+ Yes 12+ Yes 6.1+ Yes 12.1+
Android ChromeAndroid FirefoxiOS SafariIE MobileOpera Mobile
Yes 47+ Yes 44+ Yes 7.0-7.1+ Yes 10+ Yes 12.1+
source: caniuse.com
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit


Click here to write/view comments