CSS animation动画执行过半后反向回退问题如何解决

问题原因 #

你的@keyframes动画规则存在语法错误：CSS 中定义多个关键帧节点时不需要用逗号分隔，你在50%关键帧的闭合大括号后额外多写了一个逗号，导致浏览器判定语法非法，直接忽略了后续的100%关键帧配置。

此时浏览器能识别的有效关键帧仅有0%和50%两档，所以总时长1s的动画只会在这两个状态之间过渡，不会执行后半段向右滑出的逻辑，也就无法达到你的预期效果。

修复方案 #

删除50%关键帧闭合大括号后的多余逗号即可，修正后的动画代码如下：

@keyframes title-highlight{
    0%{
        left: 0;
        right: 100%;
    }
    50%{
        left: 0;
        right: 0;
    }
    100%{
        left: 100%;
        right: 0;
    }
}

修复后动画会按预期执行：前500ms色块从左侧滑入填满整个h2区域，后500ms色块从右侧滑出消失。

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