css - 悬停时无缝混合动画

Question

我有两个动画，一个是在 z 轴 上旋转 div 的默认动画，当您将鼠标悬停在 div 上时，我也会让它按比例放大和缩小。

有没有办法让我在两个动画之间做动画？目前，如果动画进行到一半，我将鼠标悬停在 div 上，它会从头开始应用新动画，这看起来很奇怪。我希望它可以在动画之间无缝切换，这可能吗？

.chest {
  height: 64px;
  width: 64px;
  background: yellow;
  animation: rocking-chest 2s linear infinite;
  
  margin-left: 50px;
  margin-top: 50px;
}

.chest:hover {
  animation: rocking-pulse-chest 1s linear infinite;
}

@keyframes rocking-chest {
  0% {
    transform: rotateZ(-20deg);
  }

  50% {
    transform: rotateZ(20deg);
  }

  100% {
    transform: rotateZ(-20deg);
  }
}

@keyframes rocking-pulse-chest {
  0% {
    transform: rotateZ(-20deg) scale(1);
  }

  50% {
    transform: rotateZ(20deg) scale(1.5);
  }

  100% {
    transform: rotateZ(-20deg) scale(1);
  }
}

<div class="chest"></div>

Answer 1

如何将缩放动画分离到外部元素上，同时让内部元素进行旋转:

.chest {
  height: 64px;
  width: 64px;
  margin-left: 50px;
  margin-top: 50px;
}

.chest-inner {
  width: 100%;
  height: 100%;
  background: yellow;
  animation: rocking-chest 2s linear infinite;
}

.chest:hover {
  animation: scale-animation 1s linear infinite;
}

@keyframes rocking-chest {
  0% {
    transform: rotateZ(-20deg);
  }
  50% {
    transform: rotateZ(20deg);
  }
  100% {
    transform: rotateZ(-20deg);
  }
}

@keyframes scale-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

<div class="chest">
  <div class="chest-inner"></div>
</div>