1

Estou fazendo o logo da empresa em HTML + CSS com animação que simula a construção/crescer do logo, tudo com CSS Key Frames, mas acontece que o logo se inicia inteiro e cada parte aparece antes da animação.

O que eu estou tentando fazer (e não conseguindo evoluir) é fazer a animação do logo em cada parte, seguindo uma sequencia.

Por exemplo, todos os "blocos" que compõe a marca não aparece.

O que aparece inicialmente é apenas a animação do primeiro bloco, quando finalizar, na sequencia já inicia a animação do segundo bloco, depois o terceiro, quarto e etc.

Fiz os testes aqui:

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>

e não consegui sair disso

A ideia é seguir a animação desde o primeiro bloco até o ultimo fazendo com que cada bloco cresça um após o outro (antes de crescer, ele não aparece).

Não sei se isso é possível com CSS até o momento.

2
  • você pode colocar função javascript no seu código ? 19/08/2015 às 20:27
  • Eu estava tentando fazer somente com CSS mas se não der, um pouco de javascript não vai atrapalhar não
    – LeandroCSA
    19/08/2015 às 21:29

1 Resposta 1

1

dei uma pesquisada e acredito que a melhor maneira pra você fazer seria com esse evento: http://api.jquery.com/animate/

Único problema é que não consegui o seletor de cada div, mas a lógica ficaria assim:

$(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");
    });
});

então essa seria a maneira mais fácil de você fazer o que deseja, com o evento animate, como disse o problema é o seletor que não consegui saber qual usar corretamente.

2
  • Eu gostaria de ter feito 100% em CSS mas aparentemente não é possível então resolvi usar o jquery mesmo, levando em conta a sua ajuda. Porém, o código ficou assim: jsfiddle.net/7Ltoudta/2 O problema do seletor que você estava encontrando é pelo fato de colocar a # no começo que é usada para selecionar IDs, e no exemplo que eu fiz eu utilizei DIVs sem classes ou ids. Agradeço pela ajuda, trabalhando na sua opção o resultado ficou bem lega.
    – LeandroCSA
    20/08/2015 às 13:42
  • parabéns @LeandroCSA, ficou bem legal realmente 20/08/2015 às 13:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .