无限交替CSS SVG文字动画结束后出现未知延迟问题求助

你的问题出在alternate动画模式搭配ease-in-out缓动的组合上——ease-in-out会让动画在接近首尾关键帧时减速到0，加上alternate切换方向时的默认行为，就会导致正向动画结束后，反向启动前出现明显的停顿延迟。

下面是两种可行的修复方案：

方案一：替换缓动函数 #

把ease-in-out换成linear，让动画全程保持匀速，消除首尾的减速停顿：

svg text {
    fill: rgb(188, 188, 188);
    stroke: black;
    stroke-width: 0.5;
    stroke-dasharray: 125;
    stroke-dashoffset: 0;
    letter-spacing: 3px;
    /* 替换为linear缓动 */
    animation: 2s infinite alternate linear animate-name;
}

@keyframes animate-name {
    100% {
        stroke-dashoffset: 125;
    }
}

方案二：手动定义往返关键帧 #

放弃alternate自动反向，直接在关键帧里写完整的往返逻辑，彻底掌控动画节奏：

svg text {
    fill: rgb(188, 188, 188);
    stroke: black;
    stroke-width: 0.5;
    stroke-dasharray: 125;
    stroke-dashoffset: 0;
    letter-spacing: 3px;
    /* 去掉alternate，用linear缓动 */
    animation: 2s infinite linear animate-name;
}

@keyframes animate-name {
    0% {
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dashoffset: 125;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

额外提示 #

可以通过浏览器开发者工具（比如Chrome的Elements面板）查看SVG文本的实际描边总长度，把stroke-dasharray和stroke-dashoffset的数值改成真实长度，动画会更精准流畅。

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