CSS 및 JavaScript를 사용하여 문자별로 텍스트 표시 문자에 애니메이션을 적용하는 방법은 무엇입니까?

<code class="css">#msg {
  text-shadow: 0 0 0 #000, 0 0 0 #000, 0 0 0 #000;
  animation: show-text 3s steps(5);
  animation-fill-mode: forwards;
}

@keyframes show-text {
  from {
    text-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent;
  }
  to {
    text-shadow: 0 0 0 #000, 0 0 0 #000, 0 0 0 #000;
  }
}</code>

<code class="html"><div id="msg"></div></code>

<code class="jquery">var showText = function (target, message, index, interval) {
  if (index < message.length) {
    $(target).append(message[index++]);
    setTimeout(function () { showText(target, message, index, interval); }, interval);
  }
};

$(function () {
  showText("#msg", "Hello, World!", 0, 500);
});</code>