Question

我有两个动画，一个是默认的动画，它在z axis上旋转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>

Answer 2

您可以设置宽度/高度而不是比例的动画，并且可以拥有多个可以轻松控制的动画。当然，您不会获得与使用缩放相同的效果。

.chest {
  height: 64px;
  width: 64px;
  animation:
    rocking-pulse-chest 1s linear infinite paused,
    rocking-chest 2s linear infinite;
  margin-left: 50px;
  margin-top: 50px;
  background: yellow;
}

.chest:hover {
  animation-play-state:running ;
}

@keyframes rocking-chest {
  0%,100% {
    transform: rotateZ(-20deg);
  }

  50% {
    transform: rotateZ(20deg);
  }
}

@keyframes rocking-pulse-chest {
  50% {
    width:calc(64px * 1.5);
    height:calc(64px * 1.5);
    margin-left: calc(50px/1.5);
    margin-top: calc(50px/1.5);
  }

}

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

悬停时无缝混合动画

2 个答案: