Bounce弹跳动画怎么实现循环播放？

书生シ蒙蒙提问于 2026-03-24 03:53:17 阅读 50

组件

我在用CSS写一个Bounce弹跳效果，但动画只执行一次就停了，想让它一直弹下去，试过加animation-iteration-count: infinite，可还是没用，是不是关键帧写错了？

这是我的代码：

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.bounce-box {
  animation: bounce 0.8s ease-in-out;
}

我来解答赞 12 收藏

反馈

1 条解答

长孙奕冉 Lv1

看起来你的代码逻辑是没问题的，动画应该会循环播放的。你已经在 .bounce-box 中设置了 animation: bounce 0.8s ease-in-out，并且添加了 animation-iteration-count: infinite 来让动画无限循环。不过，既然你提到动画只执行一次，可能是 animation-iteration-count: infinite 没有生效。

你可以尝试将 animation-iteration-count 直接合并到 animation 属性里，这样写：

@keyframes bounce {

  0%, 100% { transform: translateY(0); }

  50% { transform: translateY(-20px); }

}

.bounce-box {

  animation: bounce 0.8s ease-in-out infinite;

}

这样写可以确保所有的动画属性都在一个地方定义，有时候分开写可能会导致某些属性不生效。另外，检查一下你的浏览器控制台有没有报错信息，有时候一些小错误会导致意想不到的问题。

记得在实际项目中，虽然这个问题跟安全无关，但也别忘了保持代码整洁，防止以后排查问题的时候一头雾水。希望这能帮到你，加油！

2026-03-24 04:01