mark text in g transform css to pulsate

Question

I got a template in SVG data. Here I have a text I would like to pulsate.

Html:

<tspan class="text animated pulse" x="14.325" y="39.18">50</tspan></text>

it´s doesn't work.

Here is a link to codepen

Answer 1

Maybe try it like this ?

tspan.text.animated.pulse {
  animation: pulse-text infinite;
  animation-duration: 1s;
}

@keyframes pulse-text {
  0% {font-size: 1em;}
  50% {font-size: 1.1em;}
  100% {font-size: 1em;}
}