Pulsing SVG Animation

[weena]

I have a SVG map on this page:

There are selected circles on the map that should pulse using the below css:

.pulse {
fill: #000;
stroke: #000;
stroke-opacity: .5;
animation-duration: 2s;
animation-name: pulse;
animation-iteration-count: infinite;
transform-origin: 50% 50%;
transform-box: fill-box;
}

It definitely used to work, why would it have stopped working?

[sitek94]

It looks like the animation works but the difference in size is so small that it’s almost unnoticeable.

@keyframes pulse {
  0% {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}

When I increase scale3d value I can see the circles pulsing as expected:

[weena]

Thank you so much for looking at that for me. I tried adding your code but it didn’t work. I have since found that it is a plugin that is stopping it from working, as soon as I deactivated it, it started pulsing again. Weird!