在屏幕上设置大文本动画

Question

目前，我在屏幕上有大文字，如下所示：

＆＃13;

＆＃13;

var bkgrndString = "This is a string";
var r = 1;
playBackground();

function playBackground() {
  document.getElementsByClassName("bkgrnd")[0].innerHTML = bkgrndString.substring(0, r);
  setTimeout(function() {
    r++;
    if (r <= bkgrndString.length) {
      playBackground();
    }
  }, 800);

};

＆＃13;

.bkgrnd {
  position: absolute;
  font-family: 'Georgia';
  white-space: nowrap;
  font-size: 10em;
  width: 1280px;
  overflow: hidden;
  line-height: 1.1em;
  direction: rtl;
}

＆＃13;

<p class="bkgrnd"><p>

＆＃13;

＆＃13;

＆＃13;

如何添加动画以使大文本块在屏幕上平滑滑动？

我尝试过使用关键帧，以便整个字符串同时存在（而不是随着时间的推移而输入），但我不确定如何创建所需的效果。

非常感谢你！