I try to animate the small bubbles in my svg. But when scale is applied it looks like it’s applied to the distances between the bubbles rather than the bubbles only. It makes the buble to move to the side rather then up only as I’d like them. Why? And how to fix it? The transform-origin
only changes the direction all of them moves.
svg {
position: absolute;
left: 200px;
top: 200px;
overflow: visible;
}
@keyframes bubble {
0% {
opacity: 1;
transform: translateY(0) scale(1);
}
50% {
opacity: 1;
transform: translateY(-50px) scale(0.5);
}
100% {
opacity: 0;
transform: translateY(-100px) scale(0);
}
}
#circle1,
#circle2,
#circle3,
#circle4 {
transform-origin: top;
animation: bubble 4s ease-in-out infinite;
}
<svg width="500" height="1000" xmlns="http://www.w3.org/2000/svg">
<circle id="circle1" cx="30" cy="30" r="10" fill="red"/>
<circle id="circle2" cx="70" cy="30" r="10" fill="blue"/>
<circle id="circle3" cx="30" cy="70" r="10" fill="green"/>
<circle id="circle4" cx="70" cy="70" r="10" fill="yellow"/>
</svg>
2
Answers
It’s because of the
scale
but alsowidth
andtransform-origin
play part. Most the of issues are resolved when thewidth
is indeed100
. Also, you can make thetransform-origin: left
to make it appear to stay on samex
position. Besides you can apply the transform to the entiresvg
rather than it’s inner circles.transform-origin: top
sets the transform origin to the middle of the top edge of the<svg>
element (in your case250px 0
), so all transforms happen in relation to that point. You probably want something like this:You can then position the
<svg>
however you want.If you want to optimize the rendering, you should avoid using
overflow: visible
and instead expand the SVG to accommodate for the animation, and maybe usecontain: paint
, like so:Here we’re "raising the ceiling" in the
<svg>
, and lowering it again withmargin-top: -100%
, so the image can be centered properly. You can also scale the SVG usingwidth
/height
, as long as you provide aviewBox