How do you delay the animation?



  • Created such a twist. animation + keyframes But 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. header 2 aside 3 article And the last one. footer i'm emulating the conduct of the sketch 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>



  • To delay animation, there is a characteristic. animation-delayit may be indicated separately or the second time value 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>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2