如何修复CSS关键帧未定义标准@keyframes规则的问题？

你的代码目前只定义了WebKit前缀的关键帧规则，缺少标准的@keyframes定义，这会导致不支持WebKit前缀的浏览器无法识别这个动画效果。按下面的方式修改即可解决：

/* 适配旧版WebKit内核浏览器（如旧版Chrome、Safari） */
@-webkit-keyframes slide_animation{
    0% {left:0px;}
    10% {left:0px;}
    20% {left: 1200px;}
    30% {left: 1200px;}
    40% {left: 2400px;}
    50% {left: 2400px;}
    60% {left: 1200px;}
    70% {left: 1200px;}
    80% {left: 0px;}
    90% {left: 0px;}
    100% {left: 0px;}
}

/* 标准关键帧规则，适配绝大多数现代浏览器 */
@keyframes slide_animation{
    0% {left:0px;}
    10% {left:0px;}
    20% {left: 1200px;}
    30% {left: 1200px;}
    40% {left: 2400px;}
    50% {left: 2400px;}
    60% {left: 1200px;}
    70% {left: 1200px;}
    80% {left: 0px;}
    90% {left: 0px;}
    100% {left: 0px;}
}

说明： #

• 带-webkit-前缀的规则是为了兼容旧版WebKit内核的浏览器，这类浏览器如今占比已经很低，但保留它不会有负面影响；
• 标准的@keyframes是CSS动画的官方规范写法，现在新版Chrome、Firefox、Edge等主流浏览器都直接支持这个标准语法；
• 同时定义两者可以让动画在新旧浏览器中都能正常运行。

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