Open In App
Related Articles

CSS transition-timing-function Property

Improve Article
Save Article
Like Article

The transition-timing-function property of CSS describes how a transition will be showcased over its duration. This will allow a transition to change its speed and different movement properties during its course. The transition-timing function specifies the time an animation uses to change from one set of CSS transitions to another. The default value of the transition-timing function is ‘ease’. This value sets the animation to a slow start then after a time period the speed increases and before it ends the speed again becomes slow. 


animation-timing-function: <easing-function>|ease|linear|ease-in
    |ease-out|ease-in-out|cubic-bezier(p1, p2, p3, p4)|steps(n, <jumpterm>)

There are many different values that we can give to this property, some of them are:

  • linear – In this, the animation has the same speed from start to end.
  • ease-in – This is similar to ease just that the end of the animation is fast.
  • ease-out – This too is similar to ease just that the start of the animation is fast.
  • initial – This sets the property to its default value. The initial value of this property value is ease.



<!DOCTYPE html>
        div {
            height: 75px;
            width: 75px;
            background: yellowgreen;
            color: red;
            transition: width 5s;
        #div1 {
            transition-timing-function: linear;
        #div2 {
            transition-timing-function: ease;
        #div3 {
            transition-timing-function: ease-in;
        #div4 {
            transition-timing-function: ease-out;
        div:hover {
            width: 300px;
    <h1>The transition-timing-function Property.</h1>
        This is an example for linear
        value in transition-timing-function property.
    <div id="div1">linear</div>
        This is an example for ease
        value in transition-timing-function property.
    <div id="div2">ease</div>
        This is an example for ease-in
        value in transition-timing-function property
    <div id="div3">ease-in</div>
        This is an example for ease-out
        value in transition-timing-function property.
    <div id="div4">ease-out</div>



Supported Browsers:

  • Google Chrome 26
  • Internet Explorer 10
  • Firefox 16
  • Safari 9
  • Opera 12.1
  • Edge 12

Last Updated : 09 Jun, 2023
Like Article
Save Article
Similar Reads
Related Tutorials