如何让div同时实现hover缩放动画与translateY位移动画

现有代码实现了两个圆形div的上下浮动效果，但hover时的缩放动画只有移除浮动动画代码后才能生效，如何让div同时实现hover缩放动画与translateY位移动画？

原代码如下：

HTML #

<div id='wrapper'>
  <div class='circle'>

  </div>

  <div class='circle'>

  </div>
</div>

CSS #

:root {
  --scale--ratio: 1;
}

#wrapper {
  background-color: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
  width: 50vw;
}

.circle {
  background-color: red;
  width: 50px;
  height: 50px;
  border-radius: 20em;
  -webkit-animation: floataround 1.1s infinite alternate;
  animation: floataround 1.1s infinite alternate;
  transform: scale(var(--scale--ratio)) translate(0%, 0%);
  transform-origin: 0% 0%;
  transition: transform .9s;
  margin: 1em;
}

@keyframes floataround {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-8px);
  }
}

.circle:hover {
  cursor: pointer;
  background-color: green;
  --scale--ratio: 1.2;
}

核心问题是CSS动画（animation）的transform会覆盖元素上直接声明的transform，导致hover时的缩放效果被动画的位移动画覆盖。以下是两种可行的解决方式：

方式1：将缩放变量整合进动画的transform中 #

修改动画关键帧，让每个状态的transform同时包含scale(var(--scale--ratio))和translateY，这样动画会基于变量值同时执行缩放和位移，hover时变量变化会同步作用到动画上：

:root {
  --scale--ratio: 1;
}

#wrapper {
  background-color: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
  width: 50vw;
}

.circle {
  background-color: red;
  width: 50px;
  height: 50px;
  border-radius: 20em;
  -webkit-animation: floataround 1.1s infinite alternate;
  animation: floataround 1.1s infinite alternate;
  transform-origin: 0% 0%;
  transition: --scale--ratio 0.9s; /* 过渡变量的变化 */
  margin: 1em;
}

@keyframes floataround {
  0% {
    transform: scale(var(--scale--ratio)) translateY(0);
  }
  100% {
    transform: scale(var(--scale--ratio)) translateY(-8px);
  }
}

.circle:hover {
  cursor: pointer;
  background-color: green;
  --scale--ratio: 1.2;
}

方式2：嵌套元素分离动画与过渡效果 #

用外层元素处理hover缩放的过渡，内层元素处理浮动动画，两个元素的transform互不干扰：

修改后的HTML #

<div id='wrapper'>
  <div class='circle'>
    <div class='circle-inner'></div>
  </div>
  <div class='circle'>
    <div class='circle-inner'></div>
  </div>
</div>

修改后的CSS #

:root {
  --scale--ratio: 1;
}

#wrapper {
  background-color: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
  width: 50vw;
}

.circle {
  transform: scale(var(--scale--ratio));
  transition: transform 0.9s;
  margin: 1em;
}

.circle-inner {
  background-color: red;
  width: 50px;
  height: 50px;
  border-radius: 20em;
  -webkit-animation: floataround 1.1s infinite alternate;
  animation: floataround 1.1s infinite alternate;
}

@keyframes floataround {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-8px);
  }
}

.circle:hover {
  cursor: pointer;
  --scale--ratio: 1.2;
}

.circle:hover .circle-inner {
  background-color: green;
}

内容的提问来源于stack exchange，提问作者parsecer