如何在CSS隔离模式下向组件传递完整的动画样式？

在Blazor的CSS隔离模式中，直接用::deep传递动画类只会让子组件拿到animation-name，但关键帧定义会被Blazor加上组件专属的作用域后缀（比如@keyframes pulse[b-xyz123]），子组件的元素没有这个作用域属性，所以识别不了关键帧。下面是两种可行的解决办法：

方案一：把关键帧放到全局CSS文件 #

将动画关键帧定义在全局样式文件（比如wwwroot/css/site.css）里，这样不会被添加隔离作用域，所有组件都能直接引用：

全局CSS代码：

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(2.5); }
    100% { transform: scale(1); }
}

父组件的隔离CSS文件：

::deep .pulse {
    animation-name: pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    /* 其他动画属性按需添加 */
}

之后正常使用子组件：

<MyComponent CssClass="pulse" />

方案二：用:global()包裹关键帧 #

在父组件的隔离CSS中，用:global()包裹关键帧定义，让它跳过Blazor的作用域添加：

父组件的隔离CSS代码：

:global(@keyframes pulse) {
    0% { transform: scale(1); }
    50% { transform: scale(2.5); }
    100% { transform: scale(1); }
}

::deep .pulse {
    animation-name: pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

同样直接使用<MyComponent CssClass="pulse" />即可，子组件的span会正确应用动画。

内容的提问来源于stack exchange，提问作者greenoldman