如何创建从右到左的打字动画

Question

我想在我的图像上输入一些文字，我有这个，但这是 left to right，我希望它是 right to left，我的意思是从 بگو 开始 right 页的一侧和 grow 到页面的 left 侧

<div id="typing">بگو بهم میخواد دلت چی هر </span></div>
<div id="crow">|</div>
<img src="assets/images/one_page.png" alt="hero">

这是style

#typing {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0ch;
    color: black;
    float: right;
    font-family: sans-serif;
    font-weight:bold;
    font-size: 10px;
    overflow: hidden;
    white-space: nowrap;
    animation: typing 2s steps(100) 1s infinite alternate;
    position: absolute;
    margin-top: -43px;
}
#typing span{
    color:red;
}

#crow {
    float: right;
    color: black;
    font-family: consolas;
    font-weight:bold;
    font-size: 60px;
    animation: crow 0.5s linear 0s infinite;
}
@keyframes typing {
    from {
        width: 0ch;
    }
    to {
        width: 17ch;
    }
}
@keyframes crow {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

this is the link of this code

Answer 1

我猜你正在找这个

  .typewriter h1 {
        font-family: monospace;/* Web-safe typewriter-like font */
        overflow: hidden;/* Ensures the content is not revealed until the animation */
        border-left: .17em solid pink;/* The typewriter cursor */
        white-space: nowrap;/* Keeps the content on a single line */
        margin: 0 auto;/* Gives that scrolling effect as the typing happens */
        letter-spacing: .17em;/* Adjust as needed */
        animation: typing 3.5s steps(30, end), blinking-cursor .5s step-end infinite;
      }
      /* The typing effect */
      @keyframes typing {
        from {
          width: 0
        }
        to {
          width: 100%
        }
      }
      /* The typewriter cursor effect */
      @keyframes blinking-cursor {
        from,
        to {
          border-color: transparent
        }
        50% {
          border-color: pink;
        }
      }

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
   
  </head>
  <body>
    <div class="typewriter">
      <h1>Once upon a time...</h1>
    </div>
  </body>
</html>

如果我的回答对你有帮助，请验证我的回答。

如何创建从右到左的打字动画

How to create typing animation Right to Left

html

css

css-animations