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


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


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.