CSS3 Key Frame - Logo

Question

CSS3 Key Frame - Logo

Navigation

#1 by (1 votes)

1

I'm doing the company logo in HTML CSS with animation that simulates the construction / grow of the logo, all with CSS Key Frames, but it turns out that the logo starts whole and each part appears before the animation.

What I'm trying to do (and not being able to evolve) is to animate the logo in each part, following a sequence.

For example, all "blocks" that make up the tag do not appear.

What appears initially is just the animation of the first block, when it finishes, in the sequence already the animation of the second block starts, then the third, fourth and so on.

I've done the tests here:

section{
  width: 300px; 
  height: 300px; 
  display:table; 
  background: #fff; 
  position:relative; 
  transform: rotate(0deg); 
  margin-top: 80px; 
  margin-left: 80px;
}

div{ 
  background:#000; 
  display:table; 
  position:absolute;
}

div:nth-child(1) {
  height:30px; top:0; right:0;
  -webkit-animation-name: block1;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-direction: none;
  animation-name: block1;
  animation-duration: 0.5s;
  animation-direction: none;
  width:300px;
  opacity:1;
}

div:nth-child(2) { 
  width:30px; top:0; left:0;
  -webkit-animation-name: block2;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-direction: none;
  -webkit-animation-delay: 0.5s;
  animation-name: block2;
  animation-duration: 0.5s;
  animation-direction: none;
  animation-delay: 0.5s;
  height:300px;
  opacity:1;
}

div:nth-child(4) {
  width:300px; height:30px; top:270px; left:0;
  -webkit-animation-name: block3;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-direction: none;
  -webkit-animation-delay: 1s;
  animation-name: block3;
  animation-duration: 0.5s;
  animation-direction: none;
  animation-delay: 1s;
}

div:nth-child(3) {
  width:30px; height:230px; bottom:0px; left:270px;
  -webkit-animation-name: block4;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-direction: none;
  -webkit-animation-delay: 1.5s;
  animation-name: block4;
  animation-duration: 0.5s;
  animation-direction: none;
  animation-delay: 1.5s;
}

div:nth-child(5) {
  width:230px; height:30px; top:70px; right: 0px;
  -webkit-animation-name: block5;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-direction: none;
  -webkit-animation-delay: 2s;
  animation-name: block5;
  animation-duration: 0.5s;
  animation-direction: none;
  animation-delay: 2s;
}

div:nth-child(6) {
  width:30px; height:160px; top:70px; left: 70px;
  -webkit-animation-name: block6;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-direction: none;
  -webkit-animation-delay: 2.5s;
  animation-name: block6;
  animation-duration: 0.5s;
  animation-direction: none;
  animation-delay: 2.5s;
}

div:nth-child(7) {
  width:170px; height:30px; top:200px; left: 70px;
  -webkit-animation-name: block7;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-direction: none;
  -webkit-animation-delay: 3s;
  animation-name: block7;
  animation-duration: 0.5s;
  animation-direction: none;
  animation-delay: 3s;
}

@-webkit-keyframes block1 {
  from   { width:0px; right:0; opacity:0; }
  to { width:300px; right:0; opacity:1; }
}

@keyframes block1 {
  from  { width:0px; right:0; opacity:0;}
  top { width:300px;  right:0;  opacity:1; }
}

@-webkit-keyframes block2 {
  from   { height:0px; right:0; opacity:0; }
  to { height:300px; right:0; opacity:1; }
}

@keyframes block2 {
  from   { height:0px; right:0; opacity:0;}
  top { height:300px;  right:0; opacity:1; }
}

@-webkit-keyframes block3 {
  from   { width:1px;  }
  to { width:300px; }
}

@keyframes block3 {
  from   { width:1px; }
  to { width:300px;  }
}

@-webkit-keyframes block4 {
  from   { height:1px;  }
  to { height:230px; }
}

@keyframes block4 {
  from   { height:1px; }
  to { height:230px;  }
}

@-webkit-keyframes block5 {
  from   { width:1px;  }
  to { width:230px; }
}

@keyframes block5 {
  from   { width:1px; }
  to { width:230px;  }
}

@-webkit-keyframes block6 {
  from   { height:1px;  }
  top { height:160px; }
}

@keyframes block6 {
  from   { height:1px; }
  top { height:160px;  }
}

@-webkit-keyframes block7 {
  from   { width:1px;  }
  to { width:170px; }
}

@keyframes block7 {
  from   { width:1px; }
  top { width:170px;  }
}

<section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>

and I could not get out of it

The idea is to follow the animation from the first block to the last one, causing each block to grow one after the other (before it grows, it does not appear).

I do not know if this is possible with CSS so far.

css3

asked by anonymous 19.08.2015 / 21:03

1 answer

Uncaught exception error PDOException with message 'SQLSTATE [HY000]: General error: 2014 [closed] Apply filter in DataGrid filled with List without changing DataSource

score 1 · Accepted Answer

I researched and I believe the best way for you to do it would be with this event: link

Only problem is that I did not get the selector for each div, but the logic would look like this:

$(document).ready(function(){

    //Você também pode deixar invisivel no css
    $("#div:nth-child(2)").css("display", "none");
    $("#div:nth-child(3)").css("display", "none");
    $("#div:nth-child(4)").css("display", "none");
    $("#div:nth-child(5)").css("display", "none");
    $("#div:nth-child(6)").css("display", "none");
    $("#div:nth-child(7)").css("display", "none");

    $("#div:nth-child(1)").animate({left: -550 +"px"}, 2000, function(){
        //Ao acabar de carregar a primeira barra iria mostrar a segunda 
        $("#div:nth-child(2)").css("display", "block");
    });

    $("#div:nth-child(2)").animate({left: -550 +"px"}, 2000, function(){
        //Ao acabar de carregar a segunda barra iria mostrar a terceira 
        $("#div:nth-child(3)").css("display", "block");
    });

    $("#div:nth-child(3)").animate({left: -550 +"px"}, 2000, function(){
        //Ao acabar de carregar a terceira barra iria mostrar a quarta 
        $("#div:nth-child(4)").css("display", "block");
    });

    $("#div:nth-child(4)").animate({left: -550 +"px"}, 2000, function(){
        //Ao acabar de carregar a quarta barra iria mostrar a quinta 
        $("#div:nth-child(5)").css("display", "block");
    });

    $("#div:nth-child(5)").animate({left: -550 +"px"}, 2000, function(){
        //Ao acabar de carregar a quinta barra iria mostrar a sexta 
        $("#div:nth-child(6)").css("display", "block");
    });

    $("#div:nth-child(6)").animate({left: -550 +"px"}, 2000, function(){
        //Ao acabar de carregar a sexta barra iria mostrar a sétima 
        $("#div:nth-child(7)").css("display", "block");
    });
});

Then this would be the easiest way for you to do what you want, with the animate event, as said the problem is the selector that I could not figure out which one to use correctly.