CSS打字动画（keyframes typing）失效求助附相关代码

DevOps 小满

2026-5-21

解决文字打字动画不生效的问题

嘿，我帮你排查了下这段打字动画的代码，几个小细节导致它没正常工作，咱们一步步来修复：

问题核心原因

动画类未绑定到目标元素：你定义了.animated-text动画样式，但你的<a>标签没加上这个类，动画根本没被触发～
行内元素不支持宽度修改：<a>是行内元素，默认情况下width属性对它不起作用，动画里修改width自然没效果
动画参数与文本长度不匹配：steps(16)和width:16ch对应16个字符，但你的文本明显更长，会导致动画结束后文本显示不全

修复后的完整代码

HTML部分

给<a>标签加上animated-text类，让动画样式生效：

<li class="indent1">
  <a class="animated-text" href="#beliebte-steeldartscheiben" onclick="smoothScroll(document.getElementById('beliebte-steeldartscheiben'))">Die beliebtestens Steel-Dartscheiben...</a>
</li>

CSS部分

调整元素显示方式，同时匹配文本长度修改动画参数（这里假设文本约30个字符，你可以自己数实际字符数调整）：

.animated-text {
  font-family: monospace;
  overflow: hidden;
  height: 1.1em;
  white-space: nowrap;
  /* 关键：把行内元素改成可设置宽度的行内块级 */
  display: inline-block;
  /* 初始宽度设为0，让动画从无到有 */
  width: 0;
  /* 可选：添加光标效果更逼真 */
  border-right: 2px solid black;
  /* 调整steps和width数值匹配实际字符数 */
  animation: typing 4s steps(30) forwards, blink 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  /* 用ch单位匹配字符数，1ch等于一个等宽字符的宽度 */
  to { width: 30ch; }
}

/* 可选：光标闪烁动画 */
@keyframes blink {
  from, to { border-color: transparent; }
  50% { border-color: black; }
}