使用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