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

景苑酱~ 提问于 2026-03-17 15:23:19 阅读 5

前端

我在Vue组件里写了个简单的淡入动画，但页面上完全没反应，控制台也没报错。关键帧定义和animation属性都写了，是不是哪里写错了？

我试过把keyframes放在里面，也试过移到全局样式，都不行。元素本身是能正常渲染的，就是动画没效果。

<template>
  <div class="fade-in">Hello Animation</div>
</template>

<style scoped>
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in {
  animation: fadeIn 2s ease-in-out;
}
</style>

CSS3

我来解答赞 1 收藏

反馈

1 条解答

轩辕艳敏 Lv1

问题找到了，Vue的scoped样式会给你搞点"小动作"。

scoped会在CSS选择器后面加个data属性，比如编译后变成.fade-in[data-v-xxxxx]。但@keyframes的名字是写在animation属性值里的字符串，Vue不会自动处理它，所以keyframes定义变成了@keyframes fadeIn[data-v-xxxxx]，而你引用的还是fadeIn，两边对不上，动画自然不生效。

解决办法很简单，把keyframes放到非scoped的区域：

<template>

  <div class="fade-in">Hello Animation</div>

</template>



<style scoped>

.fade-in {

  animation: fadeIn 2s ease-in-out;

}

</style>



<style>

@keyframes fadeIn {

  from { opacity: 0; }

  to { opacity: 1; }

}

</style>

或者如果你想保持scoped，可以用深度选择器：

<style scoped>

.fade-in {

  animation: fadeIn 2s ease-in-out;

}

::v-deep @keyframes fadeIn {

  from { opacity: 0; }

  to { opacity: 1; }

}

</style>

第一种方法最省事，复制过去改一下就行。

2026-03-17 16:07