SVG CSS animation smooth transition and point of origin - css

Question

I have the following setup where multiple objects are zoomed out in a staggered delay. I am facing the following issues:
The zoom-out animation is set up to accelerate from 0% to 15% and then slow down the rest of the keyframes. But when the animation transitions from 15% to 16% the motion is visibly jarring. How can I make this transition smooth?
When the circles start out they appear from the left, not centered on their point of origin. How can I fix this?
HTML:
<div>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle class="blk" cx="10" cy="10" r="5"/>
<circle class="red" cx="20" cy="10" r="5" color="red" stroke="red" fill="red"/>
<circle class="green" cx="30" cy="20" r="5" color="red" stroke="green" fill="green"/>
</svg>
</div>
CSS:
.blk{
animation-name: zoom-out;
animation-duration: 2s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-delay: 2.5s;
}
.red{
animation-name: zoom-out;
animation-duration: 2s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-delay: 1.5s;
}
.green{
animation-name: zoom-out;
animation-duration: 2s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-delay: 0.5s;
}
#keyframes zoom-out {
0% {
transform: scale(5,5);
}
15% {
transform: scale(2,2);
}
100% {
transform: scale(1,1);
}
}

Answer 1

One posible solution would be having the circles with cx="0" and cy="0" and using those circles with an x and y position like so:
circle {
animation-name: zoom-out;
animation-duration: 2s;
/*animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;*/
animation-iteration-count: infinite;
}
#blk {
animation-delay: 2.5s;
}
#red {
stroke: red;
fill: red;
animation-delay: 1.5s;
}
#green {
stroke: green;
fill: green;
animation-delay: 0.5s;
}
#keyframes zoom-out {
0% {
transform: scale(5, 5);
}
15% {
transform: scale(2, 2);
}
100% {
transform: scale(1, 1);
}
}
<div>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<circle id="blk" r="5" />
<circle id="red" r="5" />
<circle id="green" r="5" />
</defs>
<use xlink:href="#blk" x="10" y="10" />
<use xlink:href="#red" x="20" y="10" />
<use xlink:href="#green" x="30" y="20" />
</svg>
</div>
Also in order to make the transition smooth you may use animation-timing-function: linear; instead of ease-in-out
UPDATE
The OP is commenting:
As for the point of origin, the actual SVG I am using is an illustator vector and each object in it has multiple paths and shapes. So, the red circle would actually be an object with 50 paths/shapes. How would I zero out the coordinates for a collection of paths?
Next comes an example where I'm using a collection of paths:
let wrap = document.querySelector("#red .wrap")
let bb = wrap.getBBox();
wrap.setAttribute("transform",`translate(${-(bb.x + bb.width/2)}, ${-(bb.y + bb.height/2)})`)
g[id] {
animation-name: zoom-out;
animation-duration: 2s;
animation-iteration-count: infinite;
}
#red {
stroke: red;
fill: red;
animation-delay: 1.5s;
}
#keyframes zoom-out {
0% {
transform: scale(5, 5);
}
15% {
transform: scale(2, 2);
}
100% {
transform: scale(1, 1);
}
}
svg{border:solid}
<svg viewBox="0 0 1000 500">
<defs>
<g id="red">
<g class="wrap">
<path id="body" fill-rule="evenodd" clip-rule="evenodd" d="M121.506,108.953c3.145-2.115,5.896-3.967,8.624-5.802 c20.948,12.522,42.66,12.281,65.725,4.354c0.778,3.128,1.687,6.18,2.285,9.291c3.208,16.677,0.616,36.326-2.758,52.719
c0,0-152.162,0.035-154.82,0.035c8.408,10.604,18.647,16.674,31.173,16.227c15.059-0.536,30.099-2.491,45.07-4.433
c26.453-3.431,50.783,0.317,70.991,19.392c1.675,1.581,7.179,9.382,3.632,13.47c-3.524,4.062-12.062-1.289-13.795-3.036
c-10.215-10.294-22.693-16.145-37.008-15.98c-14.568,0.166-29.103,2.376-43.679,3.216c-11.405,0.656-22.888,1.255-34.268,0.634
c-9.862-0.538-18.646-5.258-25.691-12.131c-15.127-14.758-26.56-31.716-26.923-53.792c-0.396-24.125,17.008-44.198,40.835-48.153
c23.477-3.897,43.372,4.666,62.051,17.569C115.82,104.515,118.537,106.717,121.506,108.953z"/>
<path id="head" fill-rule="evenodd" clip-rule="evenodd" d="M129.747,18.651c3.646,6.147,7.048,11.646,10.189,17.291
c1.404,2.523,2.761,3.481,5.888,2.718c14.09-3.439,28.227-3.932,42.396-0.046c1.308,0.358,3.815-0.733,4.608-1.923
c4.043-6.072,7.705-12.398,11.814-19.149c8.693,15.648,15.012,31.447,13.169,49.204c-1.48,14.266-9.114,24.946-22.028,31.172
c-17.641,8.503-35.969,9.511-54.067,1.823c-15.169-6.443-22.96-18.723-23.677-35.151C117.396,49.828,122.038,32.188,129.747,18.651z
M189.467,81.017c7.232,0.084,15.334-6.867,14.292-13.652c-0.832-5.418-11.566-6.019-11.732-6.025
c-7.238-0.308-13.768,6.133-14.144,13.949C177.731,78.444,182.773,80.938,189.467,81.017z M145.369,81.453
c3.597,0.294,11.258-2.441,11.324-6.992c0.079-5.443-3.357-10.158-8.897-12.255c-5.807-2.197-16.523,1.484-17.065,5.19
C129.692,74.494,138.107,81.089,145.369,81.453z"/>
</g>
</g>
</defs>
<use xlink:href="#red" x="300" y="175" />
</svg>
In order to zero out the coordinates for a collection of paths I'm using javaScript.
first I'm wrapping the paths in a group class="wrap"
I'm getting the bounding box of the wrap: let bb = wrap.getBBox();
I'm using the bounding box values to calculate the required translation and set the transform attribute of the wrap.