CSS3 @keyframes 动画在 Firefox 阴影 DOM 中不起作用答案

【问题标题】：CSS3 @keyframes animation not working in Firefox shadow DOMCSS3 @keyframes 动画在 Firefox 阴影 DOM 中不起作用
【发布时间】：2019-12-18 07:42:20
【问题描述】：

我正在尝试在阴影 DOM 中构建一个带有 CSS3 关键帧动画的微光加载器。微光在 Chrome 和 Safari 中完美运行，但动画在 Firefox 中不起作用。

这是一个重现行为的小 sn-p。

 document.getElementById('myDiv').attachShadow({mode:'open'}).innerHTML = `
                <div id="myInnerDiv" class="shimmer">
                    Some text here
                </div>
                <style>
                    #myInnerDiv {
                        max-width: 200px;
                        min-height: 200px;
                    }
                    .shimmer {
                        background: #f2f3f4 linear-gradient(to right, #f2f3f4 0%, #e2e4e9 20%, #f2f3f4 40%, #f2f3f4 100%) no-repeat !important;
                        background-size: 100% 100% !important;
                        color: rgba(0, 0, 0, 0) !important;
                        animation-duration: 1s;
                        animation-fill-mode: forwards;
                        animation-iteration-count: infinite;
                        animation-name: placeholderShimmer;
                        animation-timing-function: linear;
                    }
                    @keyframes placeholderShimmer {
                        0% {
                            background-position: -200px 0;
                        }

                        100% {
                            background-position: 200px 0;
                        }
                    }
                </style>
            `

<!DOCTYPE html>
<html dir="ltr" lang="en">
    <head></head>
    <body>
        <div id="myDiv"></div>
    </body>
</html>

【问题讨论】：

标签： css firefox css-animations shadow-dom

【解决方案1】：

动画仅适用于您的示例。以下示例对背景颜色进行动画处理，并且可以在 firefox 中使用。

document.getElementById('myDiv').attachShadow({
  mode: 'open'
}).innerHTML = `
        <div id="myInnerDiv" class="shimmer">
            Some text here
        </div>
        <style>
            #myInnerDiv {
                max-width: 200px;
                min-height: 200px;
            }
            .shimmer {
                background-size: 100% 100% !important;
                color: rgba(0, 0, 0, 0) !important;
                animation-duration: 1s;
                animation-fill-mode: forwards;
                animation-iteration-count: infinite;
                animation-name: placeholderShimmer;
                animation-timing-function: linear;
            }
            @keyframes placeholderShimmer {
                0% {
                  background: red;
                }

                100% {
                    background: blue;
                }
            }
        </style>
    `

&lt;div id="myDiv"&gt;&lt;/div&gt;

太多!important :) 从.shimmer -> background 中删除重要内容

    document.getElementById('myDiv').attachShadow({ mode: 'open' }).innerHTML = `
           <div id="myInnerDiv" class="shimmer">
               Some text here
           </div>
           <style>
               #myInnerDiv {
                   max-width: 200px;
                   min-height: 200px;
               }
               .shimmer {
                   background: #f2f3f4 linear-gradient(to right, #f2f3f4 0%, #e2e4e9 20%, #f2f3f4 40%, #f2f3f4 100%) no-repeat;
                   background-size: 100% 100% !important;
                   color: rgba(0, 0, 0, 0) !important;
                   animation-duration: 1s;
                   animation-fill-mode: forwards;
                   animation-iteration-count: infinite;
                   animation-name: placeholderShimmer;
                   animation-timing-function: linear;
               }
               @keyframes placeholderShimmer {
                   0% {
                       background-position: -200px 0;
                   }

                   100% {
                       background-position: 200px 0;
                   }
               }
           </style>
       `

&lt;div id="myDiv"&gt;&lt;/div&gt;

【讨论】：

哇，这确实有效，谢谢哥们！但我仍然不明白为什么在背景上有 !important 会破坏 Firefox 中的内容？这是 Firefox 特有的问题吗？