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.