I want to implement a simple pulsating animation on a circle svg element. I attempted using a transform: scale(..,..) animation, but it seems to be shifting the entire circle within its container instead of just scaling the element itself.
This is the current animation setup:
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;}
}
Here's an example (including applying the same animation to a div which achieves the desired outcome):
http://codepen.io/anon/pen/jWqVyb
Any suggestions on how to achieve this effect? The circle can be placed anywhere within the svg and must retain its position.