CSS打字文本动画无限循环失效及结尾减速问题求助

一、无限循环失效的修复 #

你的代码里有两个核心问题导致循环不生效：

1. forwards填充模式冲突：animation: typing 5s forwards中的forwards会让动画结束后固定在最后一帧，彻底阻断循环逻辑，必须删掉该属性。
2. CSS语法错误：.animation::before后缺少{}，导致后续.container样式解析异常，直接删除这个无用选择器即可。

二、结尾减速的修复 #

动画默认时间函数是ease（速度先快后慢），要实现匀速打字，将时间函数改为linear即可。

修正后的完整代码 #

CSS代码

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

.container {
  display: inline-block;
}
.typed-out{
  overflow: hidden;
  border-right: .15em solid #990000;
  white-space: nowrap;
  /* 简写声明循环与匀速逻辑，更简洁 */
  animation: typing 5s linear infinite;
  width: 0;
}

HTML代码（修复了重复的<head>和<body>标签）

<!DOCTYPE html>
<html dir="rtl" lang="en">
<head>
  <meta charset="utf-8" />
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no"
  />

  <title>Demo - Bootstrap 5 multilevel dropdown submenu sample</title>

  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.rtl.min.css"
    rel="stylesheet"
    crossorigin="anonymous"
  />
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
    crossorigin="anonymous"
  ></script>

  <link rel="stylesheet" href="./css/test.css" />
  <script src="./js/test.js" type="text/javascript"></script>
  <link href="https://fonts.googleapis.com/css?family=Dosis&display=swap" rel="stylesheet">
</head>
<body>
<div class="container d-flex justify-content-center align-items-center">
  <div>
    <h2 class="typed-out">This is a Typing Text</h2>
  </div>
</div>
</body>
</html>

补充优化（可选） #

如果想要循环时先清空文本再重新打字，可调整关键帧让动画结束时回到初始状态：

@keyframes typing {
  0% { width: 0 }
  50% { width: 100% }
  100% { width: 0 }
}

内容的提问来源于stack exchange，提问作者Alien