讓div使用動畫css屬性間歇性地出現

Question

我的目標是讓4個彩色方塊的不透明度從0到1間歇性地顯示出正在加載的東西。

我使用CSS動畫屬性（見下文）來實現這一點 - 但它不工作！

CSS

animation: opacity 1.5s infinite 200ms 

我已經實現了它codepen。有人能告訴我如何解決它嗎？

Answer 1

這是因爲您沒有分配給您的「不透明度」動畫的關鍵幀動畫。您需要創建一個關鍵幀動畫這個工作：

（我改變了動畫名 「變臉」，而不是 「不透明度」）

CSS

.loader-block:nth-child(1) { 
    background: red; 
    animation: fade 1.5s infinite 100ms; 
} 
... 

@-webkit-keyframes fade { 
    from {opacity: 1;} 
    to {opacity: 0;} 
} 

@keyframes fade { 
    from {opacity: 1;} 
    to {opacity: 0;} 
} 

CodePen

PS：您還應該用分號關閉所有CSS屬性（;）。我注意到有一些失蹤。

Answer 2

您沒有一個名爲'opacity'的動畫，因此沒有動畫被調用。根據最佳做法 - 你可能不應該有一個動畫有一個名稱，這也是一個CSS屬性，所以我重命名它閃爍。

這裏是一個codepen：http://codepen.io/anon/pen/ALEEGQ

@keyframes blink{ 
    from {opacity: 1;} 
    to {opacity: 0; } 
} 

.loader-block:nth-child(1) { 
    background: red; 
    animation: blink 1.5s infinite 100ms; 
} 
...