Масштабирование в SVG-анимации, только CSS3

Question

Я изучаю SVG-анимацию и у меня проблемы с масштабированием. Примеры очень сложны и содержат JavaScript. Я хочу сделать анимацию дыма. Плоский круг, идущий сверху вниз с эффектом масштабирования (от масштаба (1) до масштаба (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

Возможно, вам стоит взглянуть на документацию по SVG (например: https://developer.mozilla.org/en-US/docs/Web/SVG). SVG может быть анимирован с помощью SMIL Animation (https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL), но это устарело. Вы можете анимировать SVG с множеством опций, CSS является одним из них.

Что вы можете сделать для вашей проблемы, так это:

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

Вот кодекс: https://codepen.io/anon/pen/wXYyzZ

Answer 2

Если я вас правильно понял, у вас есть 2 вопроса:

1. В svg ось Y идет вниз.
2. Ваш css должен разделить transform записи, они должны быть объединены.

Итак, измените вашу 100% запись на:

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

и все будет работать, найди.