Problem with plots css animation

[declicmath]

Hi ! I have problems with animating plotted circles with the next css style: `#circle1 { animation: waves 2.5s linear; animation-delay: .1s; }

circle2 {

animation: waves 2.5s linear .7s forwards;

}

circle3 {

animation: waves 2.5s linear 1.3s forwards;

}

circle4 {

animation: waves 2.5s linear 1.9s forwards;

}

@-webkit-keyframes waves { 0% { transform: scale(1); opacity: 1; }

100% { transform: scale(4); opacity: 0; } }`

but i get an translation animation with scaling !! i tried to see if the problem is elsewhere but i belive that the animation code is true and it works for other elements that are not mapael's.

I wanna know if the problem is about mapael ! Thx in advance

[neveldo]

Hello @declicmath ,

Could you provide a JSFiddle example of your work in progress that hightlight the issue ?

[declicmath]

thanks for the comment ! So here's a JSFiddle example that highlights the #issue. thanks !

[neveldo]

Hello,

Ok I got it. According to this very interesting page (in 'Scaling' part) : https://css-tricks.com/transforms-on-svg-elements/ this is a normal behavior when scaling a SVG element.

One suggested workaround is to add transform-origin: 50% 50%; into the transformation definitions, it seems to work fine for me, but the article says it doesn't work as expected within Firefox (I haven't checked), but there are some other workarounds that are explained.

I hope it will help you, feel free to give a feedback !

[declicmath]

Thank you for the suggestion. It works fine for me.