* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

​

body {

  width: 100%;

  height: 100vh;

  background-color: #000;

  color: #fff;

  display: flex;

  justify-content: center;

  align-items: center;

}

​

.wrapper {

  position: relative;

}

​

.word {

  height: 70px;

  border-right: 2px solid green;

  line-height: 70px;

  overflow: hidden;

  animation: moveRight 1500ms steps(12) infinite, borderBlink 200ms infinite;

  font-size: 50px;

  white-space: nowrap;

}

​

.cursor {

  height: 100%;

  width: 2px;

  color: green;

}

​

@keyframes moveRight {

  0% {

    width: 0%;

  }

​

  100% {

    width: 270px;

  }

}

​

@keyframes borderBlink {

  0%,

  100% {

    border-right-color: transparent;

  }

​

  50% {

    border-right-color: green;

  }

}