CSS弹跳动画无法播放问题：操作无误但动画无效果

算力阿峰

2026-6-13

动画失效的原因及修复

你的CSS动画没动，核心是两个写法错误：

1. `-webkit-animation` 属性顺序完全错误

.bouing类中的-webkit-animation: ease-in-out bouing;把时序函数和动画名称的顺序搞反了，而且未指定时长、循环次数——这个错误的前缀属性会直接覆盖前面正常的animation设置，导致浏览器无法正确解析动画规则。

正确的动画简写顺序是：动画名时长时序函数循环次数，和标准animation的书写顺序一致。

2. 旧版WebKit浏览器需要带前缀的关键帧

早期Chrome、Safari这类WebKit内核浏览器，无法识别不带-webkit-前缀的@keyframes，必须补上对应前缀的关键帧才能正常触发动画。

修复后的完整代码

.bouing {
  animation: bouing 3s cubic-bezier(0.42, 0, 0.58, 1) infinite;
  -webkit-animation: bouing 3s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}

@keyframes bouing {
    0% { transform: scale(0.75, 1.25); }
    50% { transform: scale(1.25, 0.75); }
    100% { transform: scale(0.75, 1.25); }
}

@-webkit-keyframes bouing {
    0% { -webkit-transform: scale(0.75, 1.25); }
    50% { -webkit-transform: scale(1.25, 0.75); }
    100% { -webkit-transform: scale(0.75, 1.25); }
}