Question

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

将div设置为不带dalay；第二分区然后是第三个：

这就是我尝试过的：

    .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之间的浮点数。

此外，我们需要将每个框的 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>

CSS动画/显示div之后

1 个答案: