How to delay the animation?

Question

I created such a layout on animation + keyframes but all the blocks appear at the same time and if you put a delay in сек then this doesn’t solve anything, I would like each block to appear after drawing what is higher, namely, to start in order and go 1 header 2 aside 3 article and the last to go is footer i.e. I emit the rendering behavior on svg

 *{ margin: 0; padding: 0; } .clear,.clear:after,.clear:before{ content:""; display: block; clear: both; } header,main,footer{ width:70%; margin:2px auto; box-sizing:border-box; position:relative:; } aside,article{ float:left; box-sizing:border-box; } article{ margin-left:1%; } /*animation*/ .text{ padding:20px; color:red; animation: text 3s infinite linear; } header{ animation:header 4s infinite steps(4); } aside{ animation:aside 4s infinite linear; } article{ animation:article 4s infinite linear; } footer{ animation:footer 4s infinite linear; } @-webkit-keyframes pre{ from{ opacity:1; } to{ opacity: 0; } } @-webkit-keyframes header{ 10%{ border-top:2px solid red; height:130px; } 25%{ border-top:2px solid red; height:130px; border-right:2px solid red; } 50%{ border-top:2px solid red; height:130px; border-right:2px solid red; border-bottom: 2px solid red; } 100%{ border-top:2px solid red; height:130px; border-right:2px solid red; border-bottom: 2px solid red; border-left: 2px solid red; } } @-webkit-keyframes aside{ 10%{ width:30%; border-left:2px solid red; min-height:170px; } 25%{ width:30%; border-left:2px solid red; min-height:170px; border-top:2px solid red; } 50%{ width:30%; border-left:2px solid red; min-height:170px; border-top:2px solid red; border-right:2px solid red; } 100%{ width:30%; border-top:2px solid red; min-height:170px; border-right:2px solid red; border-bottom: 2px solid red; border-left: 2px solid red; } } @-webkit-keyframes article{ 10%{ width:69%; border-top:2px solid red; min-height:250px; } 25%{ width:69%; border-top:2px solid red; min-height:250px; border-right:2px solid red; } 50%{ width:69%; border-top:2px solid red; min-height:250px; border-right:2px solid red; border-bottom: 2px solid red; } 100%{ width:69%; border-top:2px solid red; min-height:250px; border-right:2px solid red; border-bottom: 2px solid red; border-left: 2px solid red; } } @-webkit-keyframes footer{ 10%{ border-top:2px solid red; height:200px; } 25%{ border-top:2px solid red; height:200px; border-right:2px solid red; } 50%{ border-top:2px solid red; height:200px; border-right:2px solid red; border-bottom: 2px solid red; } 100%{ border-top:2px solid red; height:200px; border-right:2px solid red; border-bottom: 2px solid red; border-left: 2px solid red; } } @-webkit-keyframes text{ from{ opacity:1; font-size:20px; } to{ opacity:0; } }

 <header> <p class="text">header</p> </header> <main div class="clear"> <aside> <p class="text">aside</p> </aside> <article> <p class="text">article</p> </article> </main> <footer> <p class="text">footer</p> </footer>

Accepted Answer · 2016-07-22T03:08:12

To delay animation there is an animation-delay property, it can be specified separately, or the second time value in animation

 * { margin: 0; padding: 0; } .clear, .clear:after, .clear:before { content: ""; display: block; clear: both; } header, main, footer { width: 70%; margin: 2px auto; box-sizing: border-box; position: relative: ; } aside, article { float: left; box-sizing: border-box; } article { margin-left: 1%; } /*animation*/ .text { padding: 20px; color: red; opacity: 0; } .text_header { animation: text 3s infinite linear; } .text_aside, .text_article { animation: text 3s 3s infinite linear; } .text_footer { animation: text 3s 6s infinite linear; } header { animation: header 4s infinite steps(4); } aside { animation: aside 4s 4s infinite linear; } article { animation: article 4s 4s infinite linear; } footer { animation: footer 4s 8s infinite linear; } @-webkit-keyframes pre { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes header { 10% { border-top: 2px solid red; height: 130px; } 25% { border-top: 2px solid red; height: 130px; border-right: 2px solid red; } 50% { border-top: 2px solid red; height: 130px; border-right: 2px solid red; border-bottom: 2px solid red; } 100% { border-top: 2px solid red; height: 130px; border-right: 2px solid red; border-bottom: 2px solid red; border-left: 2px solid red; } } @-webkit-keyframes aside { 10% { width: 30%; border-left: 2px solid red; min-height: 170px; } 25% { width: 30%; border-left: 2px solid red; min-height: 170px; border-top: 2px solid red; } 50% { width: 30%; border-left: 2px solid red; min-height: 170px; border-top: 2px solid red; border-right: 2px solid red; } 100% { width: 30%; border-top: 2px solid red; min-height: 170px; border-right: 2px solid red; border-bottom: 2px solid red; border-left: 2px solid red; } } @-webkit-keyframes article { 10% { width: 69%; border-top: 2px solid red; min-height: 250px; } 25% { width: 69%; border-top: 2px solid red; min-height: 250px; border-right: 2px solid red; } 50% { width: 69%; border-top: 2px solid red; min-height: 250px; border-right: 2px solid red; border-bottom: 2px solid red; } 100% { width: 69%; border-top: 2px solid red; min-height: 250px; border-right: 2px solid red; border-bottom: 2px solid red; border-left: 2px solid red; } } @-webkit-keyframes footer { 10% { border-top: 2px solid red; height: 200px; } 25% { border-top: 2px solid red; height: 200px; border-right: 2px solid red; } 50% { border-top: 2px solid red; height: 200px; border-right: 2px solid red; border-bottom: 2px solid red; } 100% { border-top: 2px solid red; height: 200px; border-right: 2px solid red; border-bottom: 2px solid red; border-left: 2px solid red; } } @-webkit-keyframes text { from { opacity: 0; } to { opacity: 1; font-size: 20px; } }

 <header> <p class="text text_header">header</p> </header> <main div class="clear"> <aside> <p class="text text_aside">aside</p> </aside> <article> <p class="text text_article">article</p> </article> </main> <footer> <p class="text text_footer">footer</p> </footer>

You can consider all keyframes as "one animation", for example jsfiddle.net/e96j5b8b I hope you understand the principle, because it is difficult for me to describe this.

How to delay the animation?

1 answer 1

More articles: