CSS动画结束后如何保持最终状态不回退？

ლ光纬提问于 2026-03-03 23:34:19 阅读 100

交互

我用CSS写了个简单的放大动画，但动画播完后元素又缩回去了，怎么让它停在最后的状态啊？

试过加了animation-fill-mode: forwards，但好像没起作用，是不是哪里写错了？

@keyframes zoomIn {
  from { transform: scale(1); }
  to { transform: scale(1.5); }
}
.box {
  animation: zoomIn 0.5s ease-in-out;
  /* 这里加了 forwards 但还是回退了 */
}

动画效果

我来解答赞 13 收藏

反馈

2 条解答

迷人的国娟 Lv1

兄弟，你的代码其实没问题，问题在于你可能没把 forwards 真正写进 CSS 里。

看你的代码，forwards 放在注释里了：

.box {

  animation: zoomIn 0.5s ease-in-out;

  /* 这里加了 forwards 但还是回退了 */

}

这样写 forwards 是不会生效的，得写在 animation 属性里：

.box {

  animation: zoomIn 0.5s ease-in-out forwards;

}

这样就能停在 scale(1.5) 的状态了。

如果这样还不行，检查一下有没有其他样式或 JS 覆盖了 transform。实在不行可以试试 animation-fill-mode: both，这个兼容性更好。

2026-03-11 08:05

司马美丽 Lv1

你的代码片段里其实没看到 forwards 这个值，可能是在写的时候漏掉了或者语法没对上。别担心，这个属性确实就是解决这个问题的。

最直接的办法就是在 animation 的简写属性最后加上 forwards。它的意思就是告诉浏览器：动画播完了，别动，就停在最后一帧。

你可以试试把代码改成这样：

@keyframes zoomIn {

  from { transform: scale(1); }

  to { transform: scale(1.5); }

}



.box {

  /* 注意看最后面，直接加个 forwards 就行 */

  animation: zoomIn 0.5s ease-in-out forwards;

}

这样写完，元素放大到 1.5 倍后就会稳稳停在那里，不会缩回去了。如果这样改了还不行，建议检查一下是不是有其他 CSS 规则把这个动画属性给覆盖掉了，不过一般直接加上 forwards 就能搞定。

2026-03-04 10:00