I'm trying to make these circuits look like they are running downwards. I have the right movement, but I can't seem to start them at their actual size, causing them to appear skewed at the beginning of the animation and then scaling to full size later on.
#Fill-1,
#Fill 2.... {
-webkit-animation-name: circuitGrow;
animation-name: circuitGrow;
transform-box: fill-box;
animation-duration: 6s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@keyframes circuitGrow {
0% {
-webkit-transform: scale(0, 0);
transform: scale(0, 0);
}
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}