Trying to make animation on hr tag but it's not working-CodePudding

I'm trying to make the hr tag to animate from left to right and repeat, and stay kinda center under the h2 tag, but the animation not working... is anyone know why?

.div-projects {
  margin-top: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.div-projects h2 {
  font-size: 55px;
  padding: 90px;
  color: white;
  transform: skewY(-9deg);
}

.hr-projects {
  width: 20%;
  border-radius: 30px;
  z-index: 2;
  left: 900px;
  bottom: 60px;
  transform: skewY(-6deg);
  border: 3px solid rgba(0, 136, 169, 1);
  position: relative;
  animation: alternate hr 19s infinite;
}

@keyframes hr {
  from {
    left: 900px;
  }
  to {
    right: 600px;
  }
}

<div >
  <h2>Projects</h2>

</div>
<hr >

CodePudding user response：

You need to make animation/transition on same property. So far example change from left 0 to left 100%, or left:50px to left:200px etc.

.div-projects {
    margin-top: 200px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.div-projects h2 {
    font-size: 55px;
    padding: 90px;
    color: white;
    transform: skewY(-9deg);

}

.hr-projects {
    width: 20%;
    border-radius: 30px;
    z-index: 2;
    left: 900px;
    bottom: 60px;
    transform: skewY(-6deg);
    border: 3px solid rgba(0, 136, 169, 1);
    position:relative;
    animation:alternate hr 19s infinite;
}

@keyframes hr {
    from {
        left: 0;
    }

    to {
        left: 100%;
    }
}

<div >
    <h2>Projects</h2>
    
</div>
<hr >