Сцена, которая добавляет небольшую задержку в анимацию!

Мало знаний, большой вызов! Эта статья участвует в "Необходимые знания для программистов«Творческая деятельность

предисловие

На прошлой неделе обновы в принципе не было, а я все время кидал свой блог.На самом деле достаточно иметь Наггетс, но, у меня есть какие-то ощущения, а я все равно не могу писать в Наггетс! Ха-ха, я не в тему.Когда я делал свой собственный блог, я действительно использовал весь CSS, который я изучил за последние два месяца, но я также нашел несколько интересных моментов за этот период.Я буду разбираться с ними потихоньку. не беспокоить вас, когда вы сталкиваетесь с этим. В этой статье сначала разберемся с первым пунктом, с которым я столкнулся! ! ! Речь идет о CSS-анимации.

Сцены

Потому что это ваш собственный блог, это определенно то, что цветущий лотос, некоторые непревзойденные стили все! ! ! В дизайне кнопки 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>

Здесь мы добились эффекта наведения, наведения для лучшего вида, мы специально добавляем переход, но вы когда-нибудь замечали, что при наведении ли быстро будет происходить эффект мерцания, а когда не добавлять мимо, вспышки более уродливый. Этот опыт очень плохой.

решить

По аналогии с троттлингом и антишейком в JS мы добавляем в него задержку анимации, при быстром наведении предыдущая анимация еще не началась, и ее перекрывает следующая.

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

Задержка, которую я установил здесь, составляет 0,1 с.В условиях быстрого дрожания только когда мышь останавливается в конце, она отображается белым цветом. Вы можете скопировать код и увидеть эффект! ! !