SVG CSS animation smooth transition and point of origin

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:

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);
    }
}

enxaneta · Accepted Answer

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);
  }
}

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}

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.

SVG CSS animation smooth transition and point of origin

Answers (1)

UPDATE

Related Questions