Как правильно применить transform: scale() к элементу с keyframe-анимацией?

Question

[Амир Гафуров]

К элементу с бесконечной анимацией "левитирования" на keyframe'ах style'ом добавляется свойство tranform: scale([динамически меняется с помощью js]), но объект всё так же остаётся в 100% масштабе.
Если убрать анимацию, то трансформация применяется.
Так во всех браузерах. Как правильно это всё сделать, чтобы "и вашим и нашим"?

Код анимации, применяется @extend'ом:

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

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

Код элемента с этой анимацией:

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

Comments

[HamSter]

код в студию

[Амир Гафуров]

HamSter: приложил

[HamSter]

Амир Гафуров: из того что вы приложили вопросы еще добавились)

[Амир Гафуров]

HamSter: в общем смысл в том, что при наличии свойства animation-name transform не выполнятеся. На пальцах уже говорю, как ещё более подробно описать не знаю :)

[HamSter]

Амир Гафуров: обычно такое приводится в коде!!! codepen.io/semenchenko/pen/vKLGaV

Answer 1

[HamSter]

что тут не так?