解决有关css动画@keyframes写在嵌套样式中，引用失效问题

目录

问题场景

问题原因

解决方案

---

问题场景

在写项目中，有个页面级组件，组件内部有个页面标题，我想给标题文字添加一个文字闪烁效果，

这就需要用到css动画来设定各时间段的透明度。代码如下：

<style scoped >
.page-container {width: 100%;height: auto;padding: 20px;color: var(--txt-color);.page-title {width: 100%;display: flex;justify-content: center;font-size: 20px;font-family: Arial, Helvetica, sans-serif;animation: blink 1s infinite;}@keyframes blink {0% {opacity: 1;}50% {opacity: 0;}100% {opacity: 1;}}
//其他代码.....
}
</style>

但是闪烁动画并没有生效。

问题原因

问题的原因很简单，默认情况下CSS动画如果定义在嵌套样式内部是无法识别的，也就不会生效，

只有在CSS 预处理器（如 Sass 或 Less）中嵌套的样式中定义动画是有效的。

解决方案

1.把动画定义在最外面

<style scoped >
.page-container {width: 100%;height: auto;padding: 20px;color: var(--txt-color);.page-title {width: 100%;display: flex;justify-content: center;font-size: 20px;font-family: Arial, Helvetica, sans-serif;animation: blink 1s infinite;}//其他代码.....
}@keyframes blink {0% {opacity: 1;}50% {opacity: 0;}100% {opacity: 1;}}
</style>

2.使用scss/less解决

<style scoped  lang="scss">
.page-container {width: 100%;height: auto;padding: 20px;color: var(--txt-color);.page-title {width: 100%;display: flex;justify-content: center;font-size: 20px;font-family: Arial, Helvetica, sans-serif;animation: blink 1s infinite;}@keyframes blink {0% {opacity: 1;}50% {opacity: 0;}100% {opacity: 1;}}
//其他代码.....
}
</style>