How to play animation from start to end with same speed using CSS ?

Last Updated : 14 Oct, 2020

The approach of this article is to learn how to play the animation has the same speed from start to end by using the animation-timing-function property in CSS. It 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;

Example 1:

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        .geeks { 
            font-size: 40px; 
            text-align: center; 
            font-weight: bold; 
            color: white; 
            padding-bottom: 5px; 
            font-family: Times New Roman; 
        } 
  
        .geeks1 { 
            font-size: 17px; 
            font-weight: bold; 
            text-align: center; 
            font-family: Times New Roman; 
        } 
  
        h3 { 
            width: 350px; 
            animation-name: text; 
            animation-duration: 4s; 
            animation-iteration-count: infinite; 
            background-color: blue; 
            text-align: center; 
        } 
  
        #two { 
            animation-timing-function: linear; 
        } 
  
        @keyframes text { 
            from { 
                margin-left: 90%; 
            } 
  
            to { 
                margin-left: 0%; 
            } 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <div class="geeks"> 
            GeeksforGeeks 
        </div> 
  
        <div class="geeks1"> 
            A computer science portal for geeks 
        </div> 
        <h2> 
            How to play the animation with 
            the same speed from start to end? 
        </h2> 
    </center> 
    <!-- For this animation-timing-function 
            will be set to linear -->
    <h3 id="two"> 
        Animation with same speed 
    </h3> 
</body> 
  
</html> 

Output:

Example 2:

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        div { 
            width: 150px; 
            animation-name: text; 
            animation-duration: 4s; 
            animation-iteration-count: 2; 
            background-color: yellow; 
        } 
  
        #two { 
            animation-timing-function: linear; 
        } 
  
        @keyframes text { 
            from { 
                margin-right: 100%; 
            } 
  
            to { 
                margin-right: 0%; 
            } 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h2 style="color:green"> 
            GeeksforGeeks 
        </h2> 
  
        <!-- For this animation-timing-function 
            will be set to linear -->
        <div id="two"> 
            GeeksForGeeks 
        </div> 
    </center> 
</body> 
  
</html> 