What is the correct way to apply transform: scale() to an element with a keyframe animation?

Question

css

The tranform: scale([dynamically changes with js]) property is added to an element with an infinite "levitation" animation on keyframes, but the object still remains at 100% scale.
If you remove the animation, then the transformation is applied.
So in all browsers. How to do all this correctly, so that "both yours and ours"?
Animation code used by @extend:

.animation-floating
  animation-name: floating
  animation-duration: 2.5s
  animation-iteration-count: infinite

@keyframes floating
  50%
    transform: translateY(8%)

Element code with this animation:

<span class="click-zone no-active daemon scalable" style="transform: scale(0.854808);"></span>

Answer 1

what's wrong here?