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

dedman 发表于 Dev

戴德曼

我试图用阴影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>

Grzegorz T.

动画仅适用于您的示例，这是一个问题。以下示例对背景色进行了动画处理，并且可以在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>
       `