Where’s my going?

I’m looking to create a simple pulsing animation on a circle svg element. I’m using a transform: scale(..,..) animation but for some reason it’s moving the entire circle within its container rather than simply scaling the element itself.

Here’s the animation:

animation: pulsate 2s infinite linear;
@keyframes pulsate {
  0% {transform: scale(0.1, 0.1); opacity: 0.0;}
  50% {opacity: 1.0;}
  100% {transform: scale(1.2, 1.2); opacity: 0.0;}
}

And here’s an example (including the same animation applied to a div which produces the desired result):

http://codepen.io/anon/pen/jWqVyb

Any ideas on how to create this effect? The circle may be positioned anywhere within the svg and it needs to maintain this position.


solution

You need to change the transform-origin property value.

In this case, you would use the value 50% 50%:

Updated Example

.beacon {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0px 0px 2px 2px #fff;
  animation: pulsate 2s infinite linear;
  transform-origin: 50% 50%;
}

By default, the value is 0 0 on svg elements. Reference:

CSS Transforms Module - 8 The transform-origin Property

The default value for SVG elements without associated CSS layout box is 0 0.