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

Question

我正在尝试在阴影 DOM 中使用 CSS3 关键帧动画构建微光加载器。微光在 Chrome 和 Safari 中完美运行，但动画在 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: #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>

Answer 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>
    `

<div id="myDiv"></div>

太多 !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>
       `

<div id="myDiv"></div>

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

CSS3 @keyframes animation not working in Firefox shadow DOM

css

firefox

css-animations

shadow-dom