Incremental drawing with dashoffset

Based on an answer at http://stackoverflow.com/questions/29911143/how-can-i-animate-the-drawing-of-text-on-a-web-page

by Ajedi32

HTML

<svg width="500" height="150">
  <text x="100" y="80" fill="none" stroke="black" stroke-width="1" font-size="50">Some text</text>
</svg>

CSS

text {
  font-family: sans-serif;

  stroke-dasharray: 100%;
  stroke-dashoffset: 100%;

  -webkit-animation: draw 8s forwards;
     -moz-animation: draw 8s forwards;
       -o-animation: draw 8s forwards;
      -ms-animation: draw 8s forwards;
          animation: draw 8s forwards;
}

@-webkit-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@-moz-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@-o-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@-ms-keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}