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

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

交互

我用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 但还是回退了 */
}

动画效果

我来解答赞 3 收藏

反馈

1 条解答

司马美丽 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