0

Создал такую вёрстку на 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>

1

1 ответ 1

1

Для задержки анимации есть свойство animation-delay, его можно указать отдельно, либо второе значение времени в 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>

3
  • не то , а что то другое бывает ?
    – user33274
    22 июл 2016 в 5:50
  • Можно рассматривать все кейфреймы, как "одну анимацию", например jsfiddle.net/e96j5b8b Надеюсь вы поймете принцип, потому что мне трудно описать это.
    – stackanon
    22 июл 2016 в 8:15
  • всё, дошло , я чуток по другому делал - переделаю
    – user33274
    22 июл 2016 в 12:35

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.