解决有关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>