Typing animation

HTML

<p id="typed-paragraph">
  <span id="target"></span>
  <span id="typed-cursor">|</span>
</p>

CSS

#typed-paragraph {
  position: relative;
  //top: 0;
  width: 100%;
  height: 100%;
}

#target {
  white-space: pre;
}

#target,
#typed-cursor {
  color: #505050;
  font-family: monospace;
  line-height: 1.5;
  font-size: 1.9em;
}

#typed-cursor {
  opacity: 1;
  font-weight: 800;
  -webkit-animation: blink 0.7s infinite;
  -moz-animation: blink 0.7s infinite;
  -ms-animation: blink 0.7s infinite;
  -o-animation: blink 0.7s infinite;
  animation: blink 0.7s infinite;
}

@-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-ms-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

JavaScript

(function() {
  var srcText = "Website under construction.."
  i = 0;
  result = srcText[i];
  setInterval(function() {
    if (i == srcText.length - 1) {
      clearInterval(this);
      return;
    };
    i++;
    result += srcText[i];
    $("#target").text(result);

  }, 100); // the period between every character and next one, in milliseonds.
})();