Skip to content
Related Articles

Related Articles

Improve Article
CSS | transition-timing-function Property
  • 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.

Example:




<!DOCTYPE html>
<html>
  
<head>
    <style>
        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;
        }
    </style>
</head>
  
<body>
    <h1>The transition-timing-function Property.</h1>
    <p>
        This is an example for linear 
      value in transition-timing-function property.
        <div id="div1">linear</div>
    </p>
    <p>
        This is an example for ease 
      value in transition-timing-function property.
        <div id="div2">ease</div>
    </p>
    <p>
        This is an example for ease-in 
      value in transition-timing-function property
        <div id="div3">ease-in</div>
    </p>
    <p>
        This is an example for ease-out 
      value in transition-timing-function property.
        <div id="div4">ease-out</div>
    </p>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :