使用CSS鏈衰落？

Question

我有一些類與'泡'類的div，是否有可能鏈使用css淡入淡出這些？所以第一個泡沫消失了，然後下一個等等？

頁面加載後可以這樣做嗎？

Answer 1

你應該可以用CSS3 keyframe animations來做到這一點。

要創建鏈接效果，您需要爲每個.bubble設置不同的關鍵幀規則。相反，使用JQuery會更好。

Answer 2

你可以用動畫的延遲和青菜循環做到這一點：

.bubble{ 
    border-radius:100%; 
    height:100px; 
    width:100px; 
    margin:1em; 
    background:red; 
    display:block; 
    float:left; 
    opacity:0; 
    animation: fadeIn 2s ease forwards; 
    @for $i from 1 through 10{ 
     &:nth-of-type(#{$i}){ 
     animation-delay:#{$i}s; 
    } 
    } 

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

} 

Codepen