Good afternoon, colleagues.

I have a question about installing sequential animation playback for blocks

SABJ:

There are a few divs who should, sequentially, with delayed animation work. Animation is an endless loop. Those. first I have to play the animation in the first block, then in the second, then in the third, then everything is in a circle. With a delay of a couple of seconds for each block.

PROBLEM:

The delay works out only when you first play.

What am I doing wrong?

There have already been answers to such questions, but somehow I did not find anything intelligible. If you have a link - please give.

Thank you in advance for your help!

body { min-height: 100%; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; box-sizing: border-box; } .container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -20px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; } .box { position: relative; margin: 0 10px; -webkit-box-flex: 0; -ms-flex: 0 1 calc(33% - 30px); flex: 0 1 calc(33% - 30px); background: url("http://popwebfun.com/for/bi/in/gcb_lottery/distr/images/bg_cell.png") center center/cover no-repeat; overflow: hidden; border: 3px solid; } .box:before { content: ''; display: block; padding-bottom: 100%; /*ratio*/ } .box:after { content: ''; position: absolute; top: 0; left: -120%; width: 50%; height: 100%; background: rgba(255, 0, 255, 0.25); -webkit-transform: skewX(35deg); transform: skewX(35deg); -webkit-animation: glanse 2s linear infinite; animation: glanse 2s linear infinite; } .box-1:after { -webkit-animation-delay: 0s; animation-delay: 0s; } .box-2:after { -webkit-animation-delay: 2s; animation-delay: 2s; } .box-3:after { -webkit-animation-delay: 4s; animation-delay: 4s; } @-webkit-keyframes glanse { 0% { left: -120%; } 100% { left: 120%; } } @keyframes glanse { 0% { left: -120%; } 100% { left: 120%; } } 
 <div class="container"> <div class="box box-1"></div> <div class="box box-2"></div> <div class="box box-3"></div> </div>

    1 answer 1

    In general, dear colleagues, all the salt in the proprotsii duration of the animation, delay and temporal function. Play here

     body { min-height: 100%; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; box-sizing: border-box; } .container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -20px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; } .box { position: relative; margin: 0 10px; -webkit-box-flex: 0; -ms-flex: 0 1 calc(33% - 30px); flex: 0 1 calc(33% - 30px); background: url("http://popwebfun.com/for/bi/in/gcb_lottery/distr/images/bg_cell.png") center center/cover no-repeat; overflow: hidden; border: 3px solid; } .box:before { content: ''; display: block; padding-bottom: 100%; /*ratio*/ } .box:after { content: ''; position: absolute; top: 0; left: -120%; width: 50%; height: 100%; background: rgba(255, 0, 255, 0.25); -webkit-transform: skewX(35deg); transform: skewX(35deg); -webkit-animation: glanse 2s linear infinite; animation: glanse 2s linear infinite; } .box-1:after { -webkit-animation: glanse 2s 0.0s ease-in infinite; animation: glanse 2s 0.0s ease-in infinite; } .box-2:after { -webkit-animation: glanse 2s 1.5s ease-in infinite; animation: glanse 2s 1.5s ease-in infinite; } .box-3:after { -webkit-animation: glanse 2s 2.0s ease-in infinite; animation: glanse 2s 2.0s ease-in infinite; } @-webkit-keyframes glanse { 0% { left: -120%; } 100% { left: 120%; } } @keyframes glanse { 0% { left: -120%; } 100% { left: 120%; } } 
     <div class="container"> <div class="box box-1"></div> <div class="box box-2"></div> <div class="box box-3"></div> </div>