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

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>