How to animate a straight line in linear motion using CSS ?

The linear motion of a straight line means the line will start from one point, goes to the second point, and then came back to the starting point. It is a kind of to and from motion. We will be doing it using CSS only.

Approach: The approach is to first create a straight line and then animate it using keyframes. It will be done in a two-step. First for forwarding movement and second for backward movement. The below code will follow the same approach.

HTML: In HTML, we have created a div element that is used to make a straight line.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <title>GeeksforGeeks</title>
</head>
  
<body>
    <div class="geeks"></div>
</body>
  
</html>

chevron_right


CSS:

  • Create a straight line by providing minimum height and width of your preference.
  • Animate this straight line using before selector and provide it a linear animation with keyframes identifier named as animate.
  • The animation for keyframes is very simple. For the first half-frames make width 100%(forward movement) and then reduce it to 0%(backward movement) for the next half frames.
filter_none

edit
close

play_arrow

link
brightness_4
code

<style>
    body {
        margin: 0;
        padding: 0;
        background: green;
    }
  
    .geeks {
        width: 400px;
        height: 2px;
        background: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
  
    .geeks::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: green;
        animation: animate 5s linear infinite;
    }
  
    @keyframes animate {
        0% {
            left: 0;
        }
  
        50% {
            left: 100%;
        }
  
        0% {
            left: 0;
        }
    }
</style>

chevron_right


Complete Code: In this section, we will combine both HTML and CSS code to make a straight line animation effect.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
          
    <title>
        How to animate a straight
        line in linear motion?
    </title>
  
    <style>
        body {
            margin: 0;
            padding: 0;
            background: green;
        }
  
        .geeks {
            width: 400px;
            height: 2px;
            background: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
  
        .geeks::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: green;
            animation: animate 5s linear infinite;
        }
  
        @keyframes animate {
            0% {
                left: 0;
            }
  
            50% {
                left: 100%;
            }
  
            0% {
                left: 0;
            }
        }
    </style>
</head>
  
<body>
    <div class="geeks"></div>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.