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

Question

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

这是我目前的代码，目前的问题是当鼠标悬停时 border-radius 从 50% 跳到 20% 时看起来不流畅。我希望它更平滑，比如 50% 到 49% 到 48% 到 47% 一直到 20%。

Answer 1

寻找 transition 属性。 您的问题标题中甚至包含关键字！ ;)

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

<img src="https://via.placeholder.com/100">