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

♫爱豪提问于 2026-03-03 18:49:19 阅读 424

组件

我用CSS写了个Bounce弹跳效果，但只动一次就停了。明明加了animation-iteration-count: infinite，可还是不循环，不知道哪里出错了。

下面是关键代码，是不是timing-function或者keyframes写得不对？试过把infinite换成数字也没用，求帮忙看看。

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.bounce-element {
  animation: bounce 1s ease-in-out;
  animation-iteration-count: infinite;
}

Bounce弹跳动画组件

我来解答赞 7 收藏

反馈

2 条解答

UX-玉英 Lv1

你的代码本身没问题，keyframes和iteration-count单独写都是对的。

问题出在属性顺序上。你先写了简写的animation，又单独写了animation-iteration-count，但CSS里简写会重置所有未指定的子属性，所以后面的iteration-count直接被覆盖回默认值1了。

两种改法：

第一种，把简写放在单独属性后面：

.bounce-element {

  animation-iteration-count: infinite;

  animation: bounce 1s ease-in-out;

}

第二种，更省事，直接用简写把infinite写进去：

.bounce-element {

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

}

第二种写法最稳，参数顺序就是 name → duration → timing-function → delay → iteration-count → direction → fill-mode → play-state，记不住没关系，知道前几个常用就够了。

2026-03-14 09:16

欣怡酱~ Lv1

代码放这了。问题大概率是因为你用了简写属性 animation，它会把没写的参数重置成默认值（默认就是1次），导致后面的 iteration-count 没生效，或者顺序写反了被覆盖了。

别分开写那么麻烦，直接把 infinite 塞进 animation 那一行里最稳。

@keyframes bounce {

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

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

}



.bounce-element {

  /* 直接把 infinite 加在最后面 */

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

}

这样改完就能一直跳了，不用折腾单独的属性。

2026-03-04 09:10