CSS关键帧动画为什么不生效？

UX-林莹提问于 2026-02-24 22:11:17 阅读 32

前端

我写了个简单的淡入动画，但加到元素上完全没反应，控制台也没报错。试过改animation-name和调用方式，还是不行。

关键帧代码是这样写的：

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.my-element {
  animation: fadeIn 2s ease-in;
}

CSS3 动画效果

我来解答赞 10 收藏

反馈

1 条解答

❤怡萱 Lv1

代码放这了，问题大概率出在你没加前缀或者没正确引用动画名
先确认几个点：

第一，你是不是在 animation 里漏写了 forwards？
默认动画结束后会回到初始状态，如果你希望停在最后状态，得加 animation-fill-mode: forwards;

第二，检查下你用的浏览器支不支持无前缀关键帧——现在主流浏览器都支持了，但如果你在旧版 Safari 或某些国产浏览器里跑，可能得加 -webkit- 前缀

第三，最常见坑：你是不是把 @keyframes fadeIn 写在了某个媒体查询或者嵌套在别的规则里？比如这样：

@media (min-width: 768px) {

  @keyframes fadeIn { ... }

}

这种写法是无效的，关键帧必须直接写在根作用域

再给你个完整能跑的最小示例，直接复制试试：

<div class="my-element">测试</div>

<style>

@keyframes fadeIn {

  from { opacity: 0; }

  to { opacity: 1; }

}

.my-element {

  opacity: 0;

  animation: fadeIn 2s ease-in forwards;

}

</style>

要是还不动，把你的完整 HTML 和 CSS 贴出来，我帮你看看是不是被其他样式覆盖了——比如 pointer-events: none 或者 display: none 之后又改成 block，这种也会导致动画不触发

2026-02-24 22:13