Question

如何使这些电路看起来好像向下运行。我似乎动作正确，但是我无法弄清楚如何使它们开始实际尺寸，因为现在它们在动画开始时出现倾斜，但是在完成时又移到完整尺寸。

#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

如下更新CSS：

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

Answer 2

找到了一种更好的方法，即不使用scaleY缩放比例形状：

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

内置SVG的CSS增长动画

2 个答案: