CSS文字模糊进入、淡出效果组合动画时序失配问题求解决

核心实现目标 #

需要达成的动画效果要求：

• 文本入场阶段：逐字触发从模糊状态逐渐清晰的进入效果
• 文本离场阶段：整段文本呈现平滑淡出效果
• 多轮循环播放全流程无错位，禁止在文字尚未完成入场时提前触发离场动画

已尝试方案的现存问题 #

先后迭代了两种实现逻辑，均未达到预期效果：

分离绑定的双层循环动画方案 #

• 实现逻辑：外层.animation容器绑定fadeOut循环动画，内层每个文本拆分为独立span元素、绑定blur进入动画；为每个span设置逐次递增的animation-delay，以此实现逐字浮现的视觉效果
• 问题表现：首轮播放时序匹配正常，多轮循环后出现时序失配，文字仍处于模糊入场阶段时，错误触发了外层的淡出效果

单关键帧合并动画方案 #

• 实现逻辑：将入场、离场两类动画逻辑合并写入同一组@keyframes规则，按时间节点调整text-shadow（模拟模糊视觉）、opacity、宽高属性的取值，对齐入场和离场的时序
• 问题表现：反复调整关键帧节点的属性值后，依然无法匹配预期的动画节奏

待确认的实现路径 #

• 该类效果是否可以完全不依赖JavaScript，仅通过原生CSS实现时序完全同步的稳定循环动画
• 如果必须引入JS脚本辅助实现，对应的逻辑应当如何设计：是否需要为每个独立动画环节设置专属超时定时器，来保障全流程的时序同步

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