How can I animate the drawing of text on a web page?

Question

I want to have a web page which has one centered word.

I want this word to be drawn with an animation, such that the page \"writes\" the word out the same way that

Answer 1

Only CSS :

@keyframes fadein_left {
  from {
    left: 0;
  }
  to {
    left: 100%;
  }
}

#start:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0%;
  opacity: 0.7;
  height: 25px;
  background: #fff;
  animation: fadein_left 3s;
}

  some text some text some text some text some text