How do you delay the animation?
-
Created such a twist.
animation + keyframesBut all the blocks appear at the same time and if they delay.секI'd like every block to show up after depicting what's higher, that's what's going on and on order.header2aside3articleAnd the last one.footeri'm emulating the conduct of the sketchsvg*{ 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>
-
To delay animation, there is a characteristic.
animation-delayit may be indicated separately or the second time valueanimation* { 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>
