CODEWITHSUNDEEP
animationsvg
Loops
Loops

Reputation: 1

Scaling in SVG animation, only CSS3

I am learning svg animation and I have problems with scaling. Examples are very complicated and contain javascript. I want to make a smoke animation. A flat circle going from up to down with a scaling effect (from scale(1) to scale(0.5). But when I use this code the animation goes up, not down and doesn't work. Help?

<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>

Upvotes: 0

Views: 2643

Answers (2)

Clafouti
Clafouti

Reputation: 4595

You probably should have a look at some documentation about SVG (ie: https://developer.mozilla.org/en-US/docs/Web/SVG). SVG can be animated with SMIL Animation (https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL) but it's deprecated. You can animate SVG with many options, CSS is one of them.

What you can do for your issue would be this:

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

Here's the codepen: https://codepen.io/anon/pen/wXYyzZ

Upvotes: 1

Meir
Meir

Reputation: 14375

Assuming I got you right, you have 2 issues:

  1. In svg, the Y axis goes down.
  2. Your css has to separate transform entries, they should be united.

So, change your 100% entry to:

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

and things will work find.

Upvotes: 0

Related Questions