延迟 CSS 动画的执行时间，使动画更简洁。

CSS 动画非常棒，我经常使用它们，但最近我了解到，添加一个小的延迟是一个好习惯，这样当用户不小心将鼠标悬停在上面时，动画就不会闪烁。

为了说明我的意思，请看这里发生了什么：

挺烦人的，这还不是最糟糕的，但如果再添加一些转场效果，可能会变得超级烦人。

那么我们该如何解决这个问题呢？

添加 CSS transition-delay 效果

一般来说，对于上面的例子，我们使用以下 CSS。

button {
  background: #6d597a;
  transition: background 0.2s ease-in-out;
}
button:hover {
  background: #b56576;
}

没问题吧？它能在 0.2 秒内将背景颜色从初始颜色动画化为新颜色。

但是，如果我们快速移动鼠标，就会产生恼人的闪烁效果。

解决方法很简单。
我们可以添加一个所谓的动画延迟。

这是第一种时间安排选项：

transition: background 0.2s 0.1s ease-in-out;

就我而言，第二个时间参数（0.1）是延迟时间。
它增加了一个延迟animation-delay: 0.1s。在这个时间点，动画不会开始播放。

上面这张图展示了修复后的效果。
是不是很棒？

在这个 Codepen 上试试吧。

感谢您阅读我的博客。欢迎订阅我的电子邮件简讯，也可以在Facebook或Twitter上关注我。