如何在悬停时从一种颜色平滑过渡到另一种颜色？答案

【问题标题】：How to smooth transition from one colour to another on hovering?如何在悬停时从一种颜色平滑过渡到另一种颜色？
【发布时间】：2021-10-18 15:23:52
【问题描述】：

我有以下代码，其中当圆圈悬停时，它的大小会增加（放大），并且它会在 2 秒内顺利完成。同时，圆圈也将其背景颜色从黑色变为白色，但这很突然，请参阅：

div {
width: 100px;
height: 100px;
color: white;
background-color: black;
border: 2px solid white;
position: relative;
right: -250px;
bottom: -150px;
border-radius: 50%;
transition: width 2s, height 2s;

}
div:hover {
background-color: white;
width: 200px;
height: 200px;
}

<body style="background-color: purple">

<div></div>

</body>

但是，我希望从黑色到白色的过渡平滑。我想出了一个解决方案，就是在CSS中添加transition: all 2s ease;到div：

div {
width: 100px;
height: 100px;
color: white;
background-color: black;
border: 2px solid white;
position: relative;
right: -250px;
bottom: -150px;
border-radius: 50%;
transition: width 2s, height 2s;
transition: all 2s ease;


}
div:hover {
background-color: white;
width: 200px;
height: 200px;
}

<body style="background-color: purple">

<div></div>

</body>

但在 CSS 的 DIV 部分中有两个 transition 属性，我对此表示怀疑。有没有其他方法可以绕过它？

【问题讨论】：

标签： html css hover transition

【解决方案1】：

出于性能原因，您最好声明每个您希望受转换影响的单独属性。将其视为您要切换的属性的白名单。所以你的最终转换规则可能如下所示：transition: width 2s, height 2s, background 2s;

【讨论】：

【解决方案2】：

您可以将transition-timing-function 设置为ease。 Refer this example for various timing functions

div {
  width: 100px;
  height: 100px;
  color: white;
  background-color: black;
  border: 2px solid white;
  position: relative;
  right: -250px;
  bottom: -150px;
  border-radius: 50%;
  transition: width 2s, height 2s;
  transition-timing-function: ease;
}

div:hover {
  background-color: white;
  width: 200px;
  height: 200px;
}

<body style="background-color: purple">

  <div></div>

</body>

【讨论】：

@DecapitatedSoul 根据问题，动画已经按预期工作，问题是由于担心transition 属性的重复，当他希望在ease 中进行转换时计时功能。所以解决方案是使用transition-timing-function
对不起。我删除了我之前的评论，因为我认为是我的手机没有显示流畅。

【解决方案3】：

我想这就是你想要达到的目标！

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
  background-color: purple;
}

.container .circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: black;
  border: 2px solid white;
  transition: transform 2s ease, background-color 2s 250ms ease;
}

.container .circle:hover {
  transform: scale(2);
  background-color: white;
}

<div class="container">
  <div class="circle"></div>
</div>

【讨论】：

我做了他@pr0grammar想做的事情，做了一些小的改进。
我的意思是用英文解释会很有帮助