Масштабирование с помощью TransformY перемещает элемент в неправильном направлении ⇐ CSS

[Anonymous]

Я пытаюсь анимировать маленькие пузырьки в своем SVG. Но когда масштаб применяется, создается впечатление, что он применяется к расстояниям между пузырьками, а не только к пузырькам. Это заставляет бубле двигаться в сторону, а не вверх, только так, как мне хочется. Почему? И как это исправить? Transform-origin меняет только направление их движения.

Код: Выделить всё

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

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/785 ... -direction