line moving infinitely animation-CodePudding

I'm trying to make line moving infinitely but the problem that the line back for another loop late.. I want it to be in the left immediately when the line off screen

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: #222;
    color: #fff;
}

.navbar{
    padding: 2rem;
    position: relative;
}

.navbar span{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100px;
    background-color: #fff;
    animation: animate 6s linear infinite;

}

@keyframes animate {
    0%{
        left: -100%;
    }

    50%,100%{
        left: 100%;
    }
}

<nav >
            <span></span>
           

        </nav>

CodePudding user response：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: #222;
    color: #fff;
}

.navbar{
    padding: 2rem;
    position: relative;
    width: 100%;
    animation: animate 6s linear infinite;
}

.navbar span{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100px;
    background-color: #fff;  

}


@keyframes animate {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(100%);
  }
}

</style>
</head>


<body>
<nav >
  <span></span>
</nav>

</body>


</html>

So I'm going to explain what I did here. It's a combination of Keyframes and the transform - translate in CSS. Now, if you used animation alone to try to move from left to left, you'll notice a default delay from the end of one keyframe to the other especially since you're not moving along the corners of the .navbar box (topleft-topright-bottomright-bottom-left and repeat). Using the animation-delay property will not solve it either. There are two options, using CSS Flex-box property and using Transforms. Since, you are working with keyframes I made use of transforms - translate property.

The issue with transform - translate, is that translate will move the element with respect to the width of itself. Hence, having the animation within .navbar span and setting translate for keyframe 100% will only move the element to the end of the width of the element which in this case is 100px. To go around this, we will set the animation property to the parent box itself and translate the child from 0% to 100%.

CodePudding user response：

You can use a combination of positioning in relation to the parent - left property - and relative positioning (relative to the width of the line itself) - transform: translateX property.

So the line starts at minus its own width and ends at the width of the parent (as you have now) with no translation.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #222;
  color: #fff;
}

.navbar {
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.navbar span {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100px;
  background-color: #fff;
  animation: animate 6s linear infinite;
}

@keyframes animate {
  0% {
    left: 0;
    transform: translate(-100%);
  }
  100% {
    left: 100%;
    transform: translate(0);
  }
}

<nav >
  <span></span>


</nav>