body {
  background-color: #1D2025;
}

.main{
  width: 90vw;
  margin: 0 auto;
  text-align: center;
}

.animation span{
  position: relative;
  font-size: 30px;
  font-weight: 600;
  color: white;
}

.animation .two_text{
  color: #2aff29;
}

.two_text:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #1D2025;
  border-left: 2px solid #AB3A2C;
  animation: animate 3s steps(5) infinite;
}

@keyframes animate{
  40%, 60%{
      left: calc(100% + 1px);
  }

  100%{
      left: 0%;
  }
}

const two_text = document.querySelector(".two_text");
const textmain = () => {
  setTimeout(() => {
    two_text.textContent = "개인블로그";
  }, 0);

  setTimeout(() => {
    two_text.textContent = "영화블로그";
  }, 3000);

  setTimeout(() => {
    two_text.textContent = "코딩블로그";
  }, 6000);

}
textmain();
setInterval(textmain, 9000);