CSS выросла анимация с помощью встроенного SVG

Question

Как сделать так, чтобы эти цепи выглядели так, как будто они работают вниз.Кажется, у меня правильное движение, но я не могу понять, как заставить их начать свой фактический размер, так как теперь они кажутся перекошенными при запуске анимации, но затем переходят к полному размеру после завершения.

https://jsfiddle.net/fs4e38cz/

#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);
  }
}

Answer 1

Найден лучший способ без масштабной формы с использованием translateY:

@keyframes circuitGrow {
  0% {
    -webkit-transform:translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -ms-transform:translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
       -webkit-transform:translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform:translateY(0);
    transform: translateY(0);
  }
}

Answer 2

обновить CSS следующим образом:

@keyframes circuitGrow {
  0% {
    -webkit-transform: scale(1, 0);
    transform: scale(1, 0);
  }
  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}