是否可以使该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>

Answer 2

在您的div标签中尝试一下：

 -webkit-transition: width 2s; 
    transition: width 2s;