Создал такую вёрстку на animation + keyframes
но все блоки появляются одновременно и если ставить задержку в сек
то собственно это ни чего не решает , хотелось бы что б каждый блок появился после отрисовки того что выше , а именно что бы начала и по порядку шли 1 header
2 aside
3 article
и последним шёл footer
т.е эмитирую поведение отрисовки на 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>