Question

我正在学习svg动画，缩放时遇到问题。示例非常复杂，并且包含javascript。我想制作烟雾动画。一个从上到下具有缩放效果的扁平圆（从scale（1）到scale（0.5）。但是当我使用此代码时，动画会上升，而不是下降并且不起作用。帮助吗？

<p data-height="265" data-theme-id="0" data-slug-hash="KeGXOa" data-default-tab="html,result" data-user="VoltarZord" data-embed-version="2" data-pen-title="SmokeDown" class="codepen">See the Pen <a href="https://codepen.io/VoltarZord/pen/KeGXOa/">SmokeDown</a> by Voltar Zord (<a href="https://codepen.io/VoltarZord">@VoltarZord</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

Answer 1

假设我做对了，您有2个问题：

在svg中，Y轴下降。
您的CSS必须分隔transform个条目，它们应该合并在一起。

因此，将100％的条目更改为：

100% {
  transform: translate(0px, 50px) scale(0.5);
}

一切都会发现。

Answer 2

您可能应该看一些有关SVG的文档（例如：https://developer.mozilla.org/en-US/docs/Web/SVG）。可以使用SMIL动画（https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL）对SVG进行动画处理，但已弃用。您可以使用很多选项为SVG设置动画，CSS是其中之一。

对于您的问题，您可以采取以下措施：

@keyframes smoke {
  100% {
      transform: translate(0px, 50px) scale(0.5);
  }
}

这是codepen： https://codepen.io/anon/pen/wXYyzZ

在SVG动画中缩放，仅CSS3

2 个答案: