Open In App
Related Articles

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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>

                    
Output:

Supported Browsers:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


Last Updated : 14 Oct, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads