如何从一个属性值平滑过渡到另一个属性值？

【问题标题】：How can I smoothly transition from one property value to another?如何从一个属性值平滑过渡到另一个属性值？
【发布时间】：2020-12-28 22:47:22
【问题描述】：

img {
  border-radius: 50%;
}
img:hover {
  border-radius: 20%;
}

这是我当前的代码，当前的问题是当边框半径在悬停时从 50% 跳到 20% 时看起来不平滑。我希望它从 50% 到 49% 到 48% 到 47% 一直到 20% 更平滑。

【问题讨论】：

【解决方案1】：

查找transition 属性。 你甚至在你的问题标题中有关键字！ ;)

img {
  border-radius: 50%;
  transition: border-radius 1s; /* HERE! */
}
img:hover {
  border-radius: 20%;
}

&lt;img src="https://via.placeholder.com/100"&gt;

【讨论】：