Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
  • Last Updated : 14 Oct, 2020
View Discussion
Improve Article
Save Article

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!