给动画加一点延迟的场景！

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！

前言

上周基本没有更文，一直在折腾着自己的博客，其实有掘金已经够了，但是呢，有些感概，心里话还是不能在掘金写的哟！哈哈，跑题了，在做自己的博客的时候，真的是把这两个月学的CSS都用上了，不过在这期间也发现了一些有意思的点，我会慢慢的整理出来，以后遇到就不烦啦。本文就先整理我遇到的第一个点！！！ 是关于CSS动画的。

场景

因为是自己的博客嘛，肯定是做的花里胡哨的，一些不正经的样式统统上！！！ 在button按钮的设计上，为了增加交互感，我给button加上了一点hover的效果。

button {
    padding: 10px;
    border: 2px solid #f7f7f7;
    text-align: center;
    transition: 0.3s;
    background: linear-gradient(135deg, #55efcb 0%, #1e5799 0%, #55efcb 0%, #5bcaff 100%);
}
button:hover {
    color: #fff;
}

<button>hover</button>

到这里，我们已经实现了hover的效果，为了hover的更好看，我们还特地加上了一个过渡，但是你有没有发现，当你快速hover的是否，会出现闪烁的效果，并且当你不加过去的时候，会闪烁的更难看。这体验就很不好。

解决

类似JS中的节流防抖，我们给他加上一个动画的延迟，当你快速的hover的时候，上一个动画还没有开始，就被下一个覆盖掉了。

     button {
        padding: 10px;
        border: 2px solid #f7f7f7;
        text-align: center;
        transition:  0.3s 0.1s;
     }

我这里设置的延迟是0.1s，面对快速的抖动只有最后鼠标停下来，才会显示白色。可以把代码复制下来，看看效果！！！