html - Css animate/show div after other

Question

如何在循环中使用纯 css3 依次显示 3 个 div？

没有延迟的第一个div；第二个分区；然后是第三个:

这是我尝试过的:

    .text1 {
        animation-duration: 3s;
        animation-name: slidein;
        animation-iteration-count: infinite;
    }

    @keyframes slidein {
        0% { opacity: 0; }
        25%,75%  { opacity: 100%; }
        100% { opacity: 100%;}
    }


    .animate-delay-3 { animation-delay: 3s;}
    .animate-delay-6 { animation-delay: 6s;}

<div id="container">
    <a href="#">
        <div id="header" class="header"></div>

        <div class="layer text1">
            <img src="div1.png" alt="">
        </div>
        <div class="layer text1 animate-delay-3">
            <img src="div2.png" alt="">
        </div>
        <div class="layer text1 animate-delay-6">
            <img src="div3.png" alt="">
        </div>

    </a>
</div>

Answer 1

首先，100% 不是不透明度的正确值，它应该是介于 0 和 1 之间的 float 。

此外，我们需要将每个框的不透明度设置为0。

如果我理解您只需要动画运行一次，那么animation-iteration-count 应该是1。

最后，如果我们希望元素在完成动画后保持可见，我们应该使用animation-fill-mode: forwards。

开始吧:

.text1 {
        animation-duration: 3s;
        animation-name: slidein;
        animation-iteration-count: 1;
        opacity: 0;
        animation-fill-mode: forwards;  
    }

    @keyframes slidein {
        0% { opacity: 0; }
        25%,75%  { opacity: 1; }
        100% { opacity: 1;}
    }


    .animate-delay-3 { animation-delay: 3s;}
    .animate-delay-6 { animation-delay: 6s;}

<div id="container">
    <a href="#">
        <div id="header" class="header"></div>

        <div class="layer text1">
            <img src="http://lorempixel.com/g/80/80/" alt="">
        </div>
        <div class="layer text1 animate-delay-3">
            <img src="http://lorempixel.com/g/80/80/" alt="">
        </div>
        <div class="layer text1 animate-delay-6">
            <img src="http://lorempixel.com/g/80/80/" alt="">
        </div>

    </a>
</div>