我正在尝试做一个文字输入动画。
我使用steps（）制作了一个动画。
我的目标人物是“"。
但是在使用这个字符时有一个问题。
如果目标字符是“”，则没有。和字符中的间距，
所以我做了步骤（11），因为整个字符数是11。而且效果很好
但在目标号码的情况下是“”。并且增加一个间距。
所以我做了步骤（13），动画一次不能正确地包含一个字母。
你能让我知道我该怎么处理。在这种情况下，间距？谢谢

编码

import React from "react";
import styled from "styled-components";

const App = () => {
  return (
    <Wrap>
      <div className="textBx">
        <div className="textWrap">
          <div className="text1">안녕하세요일영일입니다</div>
          <div className="text1">안녕하세요 일영일입니다.</div>
          <div className="btnBx"></div>
        </div>
      </div>
      <div className="imgBx">
        <div className="imgWrap"></div>
      </div>
    </Wrap>
  );
};

export default App;

const Wrap = styled.div`
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  background: linear-gradient(to bottom, #f04a4a, #a326f0);
  font-family: "Jua", sans-serif;

  .textBx {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .btnBx {
      margin-top: 20px;
      width: 25em;
      height: 4em;
      display: flex;

      .startBtn {
        width: 50%;
        height: 100%;
      }

      .homeBtn {
        width: 30%;
        height: 100%;
        margin-left: 20px;
      }
    }

    .textWrap {
      position: relative;
      left: 40px;
      display: flex;
      flex-direction: column;
      align-items: start;
      justify-content: center;

      .text1 {
        color: white;
        font-size: 4.5em;
        margin-bottom: 20px;
        border-right: 5px solid;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        animation: typing 2s steps(13), cursor 0.4s step-end infinite alternate;

        @keyframes typing {
          from {
            width: 0;
          }
        }

        @keyframes cursor {
          50% {
            border-color: transparent;
          }
        }
      }

      .text2 {
        color: white;
        font-size: 5.5em;
      }

      .text3 {
        color: white;
        font-size: 5.5em;
      }
    }
  }

  .imgBx {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .imgWrap {
      width: 90%;
      height: 80%;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
`;

CodeSandBoxhttps://codesandbox.io/s/keen-bush-4locjf?file=/src/App.js:0-2091