Question

＆＃13;

.st0 {
  fill: #00A14B;
  stroke: #000000;
  stroke-width: 4;
  stroke-miterlimit: 10;
}
.st1 {
  fill: green;
  -webkit-animation: usage 2s normal forwards;
  animation: usage 2s normal forward;
}
@-webkit-keyframes usage {
  from {
    height: 0;
  }
  to {
    height: 72%;
  }
}
@keyframes usage {
  from {
    height: 0;
  }
  to {
    height: 72%;
  }
}

＆＃13;

<svg>
  <g id="stroker">
    <polygon class="st0" points="39.395,10.166 39.395,2.02 25.898,2.02 25.898,10.166 5.404,10.166 5.404,102.403 59.89,102.403 59.89,10.166 " />
    <rect x="25.898" y="2.02" width="13.755" height="9.839" />

  </g>
  <g id="filler">

    <rect x="6.96" y="11.335" class="st1" width="51.374" height="88" />
  </g>
</svg>

＆＃13;

我的目标是从上到下动画电池的填充，以指示使用级别。经过多次尝试，我似乎无法让它在野生动物园中发挥作用。

基本上我只是希望电池的红色填充变为绿色，这仅用于测试。

Answer 1

我在这里解决：http://jsfiddle.net/3vpkq899/3/ 似乎需要在height到@keyframes

中更改transform: scaleY(100%)

css动画的这行代码不能在safari

1 个答案: