Skip to content
Related Articles

Related Articles

Improve Article

CSS | animation-timing-function Property

  • Last Updated : 31 Mar, 2021

The animation-timing-function property in CSS is used to specify how the animation makes transitions through keyframes. That is, it is used to specify the motion of animation during transitions.
Syntax: 
 

animation-timing-function: linear | ease | ease-in | ease-out | 
ease-in-out | step-start | step-end|steps(int, start | end) | 
cubic-bezier(n, n, n, n) | initial | inherit;

Property Value: 
 

  • ease: With this property value, the animation starts slowly, then fast, and then finally ends slowly (this is default).
  • linear: If this value is specified for the property then the animation plays with the same speed from start to end.
  • ease-in: If this value is specified then the animation begins with a slow start.
  • ease-out: If this value is specified for the property then the animation plays normally but ends slow. This is similar to ease-in.
  • ease-in-out: With this property value, the animation both starts and ends slow.

Example: HTML Program to illustrate the above property values for animation-timing-function property. 
 

html




<!DOCTYPE html>
<html>
    <head>
        <title>
             CSS | animation-timing-function Property
        </title>
        <style>
            .geeks {
                font-size: 40px;
                text-align:center;
                font-weight:bold;
                color:#090;
                padding-bottom: 5px;
                font-family:Times New Roman;
            }
             
            .geeks1 {
                font-size:17px;
                font-weight:bold;
                text-align:center;
                font-family:Times New Roman;
            }
             
            h2 {
                width: 350px;
                animation-name: text;
                animation-duration: 4s;
                animation-iteration-count: infinite;
                background-color: rgb(255, 210, 85);
            }
             
            #one {
                animation-timing-function: ease;
            }
             
            #two {
                animation-timing-function: linear;
            }
             
            #three {
                animation-timing-function: ease-in;
            }
             
            #four {
                animation-timing-function: ease-out;
            }
             
            #five {
                animation-timing-function: ease-in-out;
            }
             
            @keyframes text {
                from {
                    margin-left: 60%;
                }
                to {
                    margin-left: 0%;
                }
            }
        </style>
    </head>
    <body>
        <div class = "geeks">
            GeeksforGeeks
        </div>
         
        <div class = "geeks1">
            A computer science portal for geeks
        </div>
         
        <!-- For this the animation-timing-function will
             be set to ease -->
        <h2 id="one">
            This text is ease.
        </h2>
         
        <!-- For this animation-timing-function will
             be set to linear -->
        <h2 id="two">
            This text is linear.
        </h2>
         
        <!-- For this animation-timing-function will
             be set to ease-in -->
        <h2 id="three">
            This text is ease-in.
        </h2>
         
        <!-- For this animation-timing-function will
             be set to ease-out -->
        <h2 id="four">
            This text is ease-out.
        </h2>
         
        <!-- For this animation-timing-function will
             be set to ease-in-out -->
        <h2 id="five">
            This text is ease-in-out.
        </h2>
    </body>
</html>                                      

Supported Browser: The browser supported by animation-timing-function property are listed below: 
 

  • Google Chrome 43.0
  • Internet Explorer 10.0
  • Firefox 16.0
  • Opera 30.0
  • Safari 9.0

 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :