How to animate standing line with css-CodePudding

I want to animate a standing line from top to bottom using pure CSS. I have done it but the transform property also gets animated.

.line {
  width: 5rem;
  height: 1px;
  background-color: black;
  position: absolute;
  top: 3rem;
  left: 3rem;
  transform: rotate(90deg);
  animation: stand linear 1s;
}
@keyframes stand {
  0% {width: 0;}
  100% {width: 5rem;}
}

<div ></div>

CodePudding user response：

That's because the animation applies for the whole element. Instead of rotating the element and then adjusting its width for the animation, you could do the same think but adjust its height.

.line {
  width: 1px;
  height: 5rem;
  background-color: black;
  position: absolute;
  top: 3rem;
  left: 3rem;
  animation: stand linear 1s;
}
@keyframes stand {
  0% {height: 0;}
  100% {height: 5rem;}
}

<div ></div>

CodePudding user response：

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.enter code here

<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;
        }

        .Stack {
            width: 400px;
            height: 2px;
            background: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .Stack::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 ></div>
</body>

</html>