typingfreaks/dist/style.css

.kana {
  display: inline-block;
  position: relative;
  white-space: pre;
}

.kana::after {
  display: inline-block;
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  color: red;
  font-weight: bold;
  overflow: hidden;
  width: 0px;
  transition: width 0.1s;
}

.kana.half::after {
  width: 50%;
}

.kana.full::after {
  width: 100%;
}

.romaji {
  display: inline-block;
}

.romaji.error {
  animation-name: pulse;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
}

@keyframes pulse {
  0% {
    transform: scale(1, 1)
  }
  50% {
    transform: scale(2, 2)
  }
  100% {
    transform: scale(1, 1)
  }
}

.progress-bar {
  position: relative;
  height: 5px;
  background-color: lightgrey;
}

.progress-bar .shade {
  position: absolute;
  height: 5px;
  background-color: red;
  animation-timing-function: linear;
  animation-play-state: paused;
}

@keyframes progress {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

.level-control.waiting {
  color: grey;
}

.level-control.waiting .romaji {
  color: transparent;
}