html - 有没有可能让这个div顺利移动？

Question

我试图让这个 div 在改变颜色时平滑移动，但问题是就在它应该过渡到 #bad455 颜色之前，它短暂地停止了.

所以我想知道有什么方法可以让它顺利进行而不停止吗？

div {
  background-color: black;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

div:hover {
  animation-name: anim1;
  animation-duration: 3s;
}

@keyframes anim1 {
  0% {
    background-color: pink;
    margin-top: 10px;
  }
  50% {
    background-color: yellow;
    margin-top: 20px;
  }
  100% {
    background-color: #bad455;
    margin-top: 30px;
  }
}

<div></div>

Answer 1

您将迭代计数设置为无限，以便您的动画继续播放并将最后一个关键帧的边距设置回 0，以便它返回到默认状态。

div {
  background-color: black;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

div:hover {
  animation-name: anim1;
  animation-iteration-count: infinite;
  animation-duration: 3s;
}

@keyframes anim1 {
  0% {
    background-color: pink;
    margin-top: 10px;
  }
  50% {
    background-color: yellow;
    margin-top: 30px;
  }
  100% {
    background-color: #bad455;
    margin-top: 0px;
  }
}

<div></div>