星星闪烁动画

有时候会有多个星星一起闪烁的:我是调用相同的动画样式加延迟,不让它们同闪

html

<div class="star1 ani-star1"></div>
<div class="star2 ani-star1 ani-delay1"></div>

css

@keyframes star1{
    0%, 100%, 50% {
        opacity: 1;
    }
    25%, 75% {
        opacity: .1;
    }
}
@-webkit-keyframes star1{
    0%, 100%, 50% {
        opacity: 1;
    }
    25%, 75% {
        opacity: .1;
    }  
}

.ani-star1{
    animation:star1 2.5s both infinite linear;
    -webkit-animation:star1 2.5s both infinite linear;
    -moz-animation:star1 2.5s both infinite linear;
    -ms-animation:star1 2.5s both infinite linear;
}
.ani-delay1{
    animation-delay:0.3s;
    -webkit-animation-delay:0.3s;
    -moz-animation-delay:0.3s;
    -ms-animation-delay:0.3s;
}

  

  

posted @ 2017-05-09 14:23  front-gl  阅读(575)  评论(0编辑  收藏  举报