Skip to content
Related Articles

Related Articles

CSS | transition-timing-function Property

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 27 Aug, 2019

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.

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.


<!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>


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!