Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

preface

Last week no more basic text, has been tossing about their own blog, in fact, nuggets have enough, but, some feeling, the truth or can not be in nuggets to write yo! Haha, off topic, when doing my own blog, I really used all the CSS I learned in these two months, but I also found some interesting points during this period, I will slowly sort them out, later encountered will not be bored. This article will first sort out the first point I encountered!! It’s about CSS animation.

scenario

Because it is their own blog, certainly is to do flashy, some not serious style all on!! In the design of button button, in order to increase mutual feeling, I add a little hover effect to button.

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

<button>hover</button>
Copy the code

Here, we have achieved the hover effect, in order to hover better look, we also specially added a transition, but you have not found that when you quickly hover, there will be a flashing effect, and when you do not add the past, the flashing will be more ugly. It’s a bad experience.

To solve

Similar to throttling in JS, we add an animation delay to it. When you hover quickly, the last animation will be overwritten by the next animation before it has even started.

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

Copy the code

The delay I set here is 0.1s, and in the face of fast shaking, it will only show white when the mouse stops at the end. You can copy the code down and see the effect!!