使用内联 SVG 的 CSS 增长动画答案

【问题标题】：CSS Grown Animation with Inline SVG使用内联 SVG 的 CSS 增长动画
【发布时间】：2018-12-05 08:32:08
【问题描述】：

我怎样才能使这些电路看起来好像它们在向下运行。我似乎有正确的移动，但我不知道如何让它们开始它们的实际大小，因为现在它们在动画开始时看起来是倾斜的，但在完成后会移动到完整大小。

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

【问题讨论】：

标签： css animation svg css-animations

【解决方案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);
  }
}

【讨论】：

【解决方案2】：

更新 CSS 如下：

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

【讨论】：