如何解決從CSS關鍵幀動畫閃爍

我想通過無限的關鍵幀動畫和動畫延遲屬性錯開三個框的不透明（淡入淡出）。如何解決從CSS關鍵幀動畫閃爍

我收到了一些意想不到的行爲，隨着第三個盒子消失，它在動畫再次開始之前突然再次出現微弱（「閃爍」）。我在瀏覽器中遇到這種情況。

我想使用僞元素，如果可能的話，有沒有這個關鍵幀錯誤的已知修復？

HTML

<div class="container"> 
    <div class="child"> 
    <div></div> 
    </div> 
</div>

SCSS

.container { 
    position: fixed; 
    left: 150px; 
    top: 50px; 

.child { 
    position: absolute; 
    animation:mymove 1s infinite; 

    &::before{ 
     display: block; 
     position: absolute; 
     width: 25px; 
     height: 25px; 
     background-color: red; 
     content: ""; 
     right: 40px; 
     animation: inherit; 
     animation-delay: .15s; 
    } 

    div { 
     width: 25px; 
     height: 25px; 
     background-color: red; 
     animation: inherit; 
     animation-delay: .30s; 
    } 

    &::after{ 
     display: block; 
     position: absolute; 
     width: 25px; 
     height: 25px; 
     background-color: red; 
     content: ""; 
     left: 40px; 
     bottom: 0px; 
     animation: inherit; 
     animation-delay: .45s; 
     } 
    } 
} 

@keyframes mymove { 
     0% { 
     opacity: 1; 
    } 

     100% { 
     opacity: 0; 
    } 
}

JS Fiddle

來源

2017-07-07 12th

我研究這兩個變種刪除動畫和我所看到的，他們的行爲是相同的。如果你的非僞版本沒有，你也需要發佈該代碼示例...這裏是我的https://jsfiddle.net/gfrd06te/1/ – LGSon

你是對的，我錯了...你是看到第三個元素的閃爍？我也在你的例子中看到它。 – 12th

它實際上在所有這些中，儘管它在第三個中是最明顯的，這是可以理解的，因爲它具有最長的延遲。我會很快看看，看看如何可以避免 – LGSon

他們之所以閃爍是因爲你已經設置的動畫在他們的父母，在child。

而且由於其動畫沒有延遲，所以它會在其子節點之前開始播放，但一旦它們的延遲過去了，它們就會被它們覆蓋，因此可以看到快速閃爍。

，以避免任何與此未來問題的最佳方法，是從child

.container { 
 
    position: fixed; 
 
    left: 150px; 
 
    top: 50px; 
 
} 
 

 
.container .child { 
 
    position: absolute; 
 
} 
 

 
.container .child::before { 
 
    display: block; 
 
    position: absolute; 
 
    width: 25px; 
 
    height: 25px; 
 
    background-color: red; 
 
    content: ""; 
 
    right: 40px; 
 
    animation: mymove 1s infinite; 
 
    animation-delay: 0.15s; 
 
} 
 

 
.container .child div { 
 
    width: 25px; 
 
    height: 25px; 
 
    background-color: red; 
 
    animation: mymove 1s infinite; 
 
    animation-delay: 0.3s; 
 
} 
 

 
.container .child::after { 
 
    display: block; 
 
    position: absolute; 
 
    width: 25px; 
 
    height: 25px; 
 
    background-color: red; 
 
    content: ""; 
 
    left: 40px; 
 
    bottom: 0px; 
 
    animation: mymove 1s infinite; 
 
    animation-delay: 0.45s; 
 
} 
 

 
@keyframes mymove { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
}

<div class="container"> 
 
    <div class="child"> 
 
    <div></div> 
 
    </div> 
 
</div>

來源

2017-07-07 17:06:06 LGSon

偉大的見解。現在是有道理的。謝謝！ – 12th

如何解決從CSS關鍵幀動畫閃爍

回答

相關問題