Key Frame CSS3 - Logo

Asked

Viewed 114 times

1

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

What I’m trying to do (and failing 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 only the animation of the first block, when finishing, in the sequence already starts the animation of the second block, then the third, fourth and etc.

I ran 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 couldn’t get out of it

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

I don’t know if that’s possible with CSS so far.

css3 animation

  • you can put javascript function in your code ?

  • I was trying to do only with CSS but if not, a little javascript will not disturb no

1 answer

1


I did some research and I believe that the best way for you to do it would be with this event: http://api.jquery.com/animate/

Only problem is I didn’t get the selector from each div, but the logic would be 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 that would be the easiest way for you to do what you want with the event Animate, as said the problem is the selector that I could not know which to use correctly.

  • I would like to have done 100% in CSS but apparently it is not possible so I decided to use jquery itself, taking into account its help. However, the code looks like this: https:/jsfiddle.net/7Ltoudta/2/ The problem with the selector you were encountering is that you put # at the beginning that is used to select Ids, and in the example I did I used Divs without classes or ids. Thanks for the help, working on your option the result is nice.

  • Congratulations @Leandrocsa, it turned out really cool

Browser other questions tagged css3 animation

You are not signed in. Login or sign up in order to post.