Как подружить translate и анимацию?

Question

[Raneto4ka]

Есть шкала с делениями, при клике на отсечку однократно срабатывает анимация (изменятется размер засечки).
Проблема в том, что положение этих отсечек выровнено с помощью transform: translate(-50%, -50%) и при срабатывании анимации точка сначала скачет на исходную позицию, а потом возвращается на место.
Должен же быть какой-то способ это исправить не меняя саму анимацию?

animation: pulse 0.5s;
@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.22, 1.22, 1.22);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

https://codepen.io/Raneto4ka/pen/OYJzGQ

Answer 1

[Максим Толкачев]

Добавь транслейт переноса в каждую анимацию

@keyframes pulse {
  from {
    transform: translate(-50%, -50%) scale3d(1, 1, 1);
  }

  50% {
    transform: translate(-50%, -50%) scale3d(1.22, 1.22, 1.22);
  }

  to {
    transform: translate(-50%, -50%) scale3d(1, 1, 1);
  }
}