запускать весь ключевой кадр анимации при наведении, даже если он покидает целевой объект - PullRequest
Новая
       120

запускать весь ключевой кадр анимации при наведении, даже если он покидает целевой объект

0 голосов
/ 17 марта 2020

У меня есть код ниже, который встряхивает значок WhatsApp при наведении курсора. Я заметил, что если я наведу значок и затем очень быстро переместлю указатель из целевого элемента div, анимация остановится. Это также влияет на щелчок, потому что, если вы хотите, например, чтобы посетитель с мобильного устройства отображал анимацию при нажатии (или, скорее, в состоянии активности или фокуса), анимация не будет отображаться, поскольку щелчок, очевидно, быстрее, чем сама анимация. Как я могу изменить это поведение таким образом, чтобы анимация запускала весь ключевой кадр при наведении, даже если я оставляю целевой div? большое спасибо

CODEPEN

HTML

<div class="whatsup-fixed">
        <div class="et_pb_code_inner"><a href="https://wa.me/393331221646" target="_blank" rel="noopener noreferrer">
            <svg viewBox="0 0 100.1 100.1" style="enable-background:new 0 0 100.1 100.1;">
            <style type="text/css">.st0{fill:#FFFFFF;}.st1{fill:#00E676;}</style>
            <path class="st0" d="M85.1,14.6C75.7,5.2,63.2,0,50,0C22.7,0,0.4,22.3,0.4,49.6c0,8.7,2.3,17.3,6.6,24.8l-7,25.7l26.3-6.9
    c7.2,4,15.4,6,23.7,6h0c27.3,0,50-22.2,50-49.6C100,36.4,94.4,23.9,85.1,14.6z"></path>
            <path class="st1" d="M50,90.8c-7.4,0-14.7-2-21-5.7l-1.5-0.9l-15.6,4.1l4.2-15.2l-1-1.6C11,65,8.8,57.4,8.8,49.6
    C8.8,26.9,27.3,8.4,50,8.4c11,0,21.3,4.3,29.1,12.1s12.6,18.1,12.5,29.1C91.7,72.3,72.7,90.8,50,90.8z"></path>
            <path class="st0" d="M72.6,60c-1.2-0.6-7.3-3.6-8.5-4c-1.1-0.4-2-0.6-2.8,0.6c-0.8,1.3-3.2,4-3.9,4.9c-0.7,0.8-1.5,0.9-2.7,0.3
    c-7.3-3.6-12.1-6.5-16.9-14.7c-1.3-2.2,1.3-2,3.6-6.8c0.4-0.8,0.2-1.5-0.1-2.2c-0.3-0.6-2.8-6.7-3.8-9.2c-1-2.4-2-2.1-2.8-2.1
    c-0.7,0-1.5,0-2.4,0c-0.8,0-2.2,0.3-3.3,1.5c-1.1,1.3-4.3,4.2-4.3,10.3s4.4,12,5,12.8c0.6,0.8,8.7,13.3,21.2,18.7
    c7.9,3.4,10.9,3.7,14.9,3.1c2.4-0.4,7.3-3,8.4-5.9s1-5.4,0.7-5.9C74.7,60.9,73.8,60.6,72.6,60z"></path>
            </svg></a>
        </div>
    </div>

CSS

.whatsup-fixed {
    height: 80px;
    width: 80px;
    z-index: 9999;
    position: fixed;
    bottom: 40px;
    right: 40px;
    -webkit-transition: 0.5s ease;
    -moz-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -ms-transition: 0.5s ease;
    transition: 0.5s ease;
    filter: drop-shadow(3px 3px 2px rgba(0,0,0,.7));
}
.whatsup-fixed:hover, .whatsup-fixed:active {
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
...