使用css3过渡的平滑动画

Question

我在元素中添加了一个字体真棒用户图标。当我将鼠标悬停在该元素上时，我希望图标大小能够彻底降低。所以我使用过渡作为＆＃34;所有0.5s轻松＆＃34;。它有效，但它动画步骤明智。是否可以顺利地为图标设置动画。

Answer 1

你遇到的问题是，当文本缩小时，悬停目标也会缩小，这意味着文本可以到达不再悬停的位置，因此它会再次开始增长。这可能会导致令人讨厌的视觉锯齿效果。

在下面的示例中，第一个示例使用“焦点”，它不受大小变化的影响。第二个使用“悬停”，很可能会受到影响。

单击或选项卡到示例一，它将平稳调整大小。试着徘徊在第二个例子上，这将是可怕的。

您可以通过使悬停目标保持恒定大小来解决此问题，因此在动画期间不会减少。

在这个特定领域（调整文本大小）的其他常见原因是：

• 如果浏览器在调整大小期间难以呈现字体
• 如果前后尺寸相距不远且动画持续时间很长
• 如果之前的尺寸相差很远且动画的持续时间太短

div {
  font-size: 5em;
  transition: font-size 0.5s ease;
}

div:focus {
  font-size: 0.5em;
}

p {
  font-size: 5em;
  transition: font-size 0.5s ease;
}

p:hover {
  font-size: 0.5em;
}

<div tabindex="0">
  Example One
</div>

<p>
  Example Two
</p>