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

原文地址：https://blog.csdn.net/qq_62262918/article/details/140482568

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！