前端css知識實現自動打字，文字滾動

HTML部分：

    <div class="div1">
      <div class="div2">文字文字文字文字文字文字文字文字文字文字文字文字</div>
    </div>

CSS部分：

      .div1 {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .div2 {
        width: 300px;
        white-space: nowrap;
        overflow: hidden;
        border-right: 1px solid transparent;
        font-size: 16px;
        color: blue;
        animation: sizetype 5s steps(20) 0s backwards,
          showf 500ms steps(1) 0s 10 forwards;
        -webkit-animation: sizetype 5s steps(20) 0s backwards,
          showf 500ms steps(1) 0s 10 forwards;
      }
      @keyframes sizetype {
        from {
          width: 0;
        }
      }
      @keyframes showf {
        50% {
          border-right-color: currentColor;
        }
      }