如何调整CSS打字动画速度？询问代码原理及动画修改方法

1. 可以减慢动画播放速度 #

直接修改CSS动画属性里的时长参数即可：
你原有代码的动画属性是animation: typing 4.5s steps(450, end), blink-caret .95s step-end infinite;

• 要减慢打字速度，把4.5s的数值调大，比如改成8s，打字总时长就会从4.5秒变成8秒，速度明显变慢
• 要减慢光标闪烁速度，把.95s的数值调大，比如改成1.5s，光标闪烁周期就会从0.95秒变成1.5秒

2. 代码运行逻辑 #

这段代码实现的是打字机输入效果，运行逻辑分为基础样式和动画两部分：

基础样式作用 #

• overflow: hidden：隐藏超出容器宽度的文字，保证未输入的内容不会提前显示
• border-right: .15em solid orange：用右边框模拟打字机的闪烁光标
• white-space: nowrap：强制文字不换行，避免打字过程中内容折行
• margin: 0 auto：让标题水平居中，打字时的滚动效果更自然
• letter-spacing: .15em：调整字符间距，提升打字效果的真实感

动画逻辑 #

这里绑定了两个独立的CSS动画：

1. typing打字动画：采用步进动画steps(450, end)，将整个动画过程拆成450个步骤逐帧执行，总时长4.5秒，效果就是文字从左到右一点点显示出来，模拟逐字输入的效果。
2. blink-caret光标闪烁动画：采用step-end跳变动画，每0.95秒切换一次边框的透明度，无限循环，实现光标闪烁的效果。

注：你提供的代码里缺失了@keyframes的动画关键帧定义，正常配套的关键帧代码如下，否则动画不会生效：

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

3. 常见动画效果修改方案 #

可以根据需求调整以下参数修改效果：

• 调整打字精度：把steps(450, end)里的450改成和显示字符数一致的数值，比如你的示例只有Hi2个字符，改成steps(2, end)，就能看到明确的逐字跳出效果，原来的450步太密集，和平滑动画几乎没有区别
• 循环打字效果：给typing动画加infinite参数，就会循环执行打字动作，再加alternate参数就会实现打完字再逐字删除的往复效果，示例：animation: typing 4.5s steps(2, end) infinite alternate, blink-caret .95s step-end infinite;
• 修改光标样式：调整border-right的参数可以修改光标的粗细、颜色，比如改成border-right: .2em solid blue就是更粗的蓝色光标
• 调整字符显示样式：修改letter-spacing可以调整字间距，修改color可以调整文字颜色，都不会影响动画的正常运行

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