CSS анимировать / показывать div за другим - PullRequest
Новая
       11

CSS анимировать / показывать div за другим

0 голосов
/ 09 апреля 2019

Как я могу показать 3 деления друг за другом с чистым css3 в цикле?

Firt 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>

1 Ответ

0 голосов
/ 09 апреля 2019

Прежде всего 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>
...