Как отменить анимацию @keyframe при выключенной мышке? - PullRequest
Новая
       38

Как отменить анимацию @keyframe при выключенной мышке?

1 голос
/ 20 октября 2019

Мне нужно отменить анимацию стирания, когда мышь уходит от кнопки. Есть ли способ сделать это только в CSS?

Я знаю, что могу поменять анимацию, но я не уверен, куда поместить файл CSS, чтобы получить правильную анимацию. Если я введу его в .get-started, он стирает границу, и я не могу полностью взаимодействовать с кнопкой.

HTML: 

<div class="get-started" id="button">
      <h4 class="part1">Get <span class="part2">Started</span></h4>
    </div>

CSS: 

body {

  background:black;

}

#button {

    display: flex;
    font-size: 2.5rem;
    color: white;

  align-items: center;
  justify-content: center;

  width: 250px;
  height: 75px;

    position: relative;
    top: -30%;
    left: calc(50% - 125px);

}

.get-started {
  --borderWidth: 5px;
  position: relative;
  border-radius: var(--borderWidth);
    background-color: #8551FF;
    box-shadow: inset 0 0 0 5px white;
    z-index:1;
}

.get-started h4.part1 {

    color: #FFFFFF;
    font-family: 'Coves Light';
    font-weight: normal;

}

.get-started span.part2 {

    color: #5EFF00;
    font-family: 'Coves';
    font-weight: bold;

}

.get-started:after {
  content: '';
  position: absolute;
}

.get-started:hover:after {
    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 2px;
    background-size: 300% 300%;
    animation: frame-enter 1s forwards ease-in-out reverse, gradient-animation 4s ease-in-out infinite;
}

/* motion */
@keyframes gradient-animation {
  0% {
    background-position: 15% 0%;
  }
  50% {
    background-position: 85% 100%;
  }
  100% {
    background-position: 15% 0%;
  }
}

@keyframes frame-enter {
  0% {
    clip-path: polygon(0% 100%, 5px 100%, 5px 5px, calc(100% - 5px) 5px, calc(100% - 5px) calc(100% - 5px), 5px calc(100% - 5px), 5px 100%, 100% 100%, 100% 0%, 0% 0%);
  }
  25% {
    clip-path: polygon(0% 100%, 5px 100%, 5px 5px, calc(100% - 5px) 5px, calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%, 100% 100%, 100% 0%, 0% 0%);
  }
  50% {
    clip-path: polygon(0% 100%, 5px 100%, 5px 5px, calc(100% - 5px) 5px, calc(100% - 5px) 5px, calc(100% - 5px) 5px, calc(100% - 5px) 5px, calc(100% - 5px) 5px, 100% 0%, 0% 0%);
  }
  75% {
    -webkit-clip-path: polygon(0% 100%, 5px 100%, 5px 5px, 5px 5px, 5px 5px, 5px 5px, 5px 5px, 5px 5px, 5px 0%, 0% 0%);
  }
  100% {
    -webkit-clip-path: polygon(0% 100%, 5px 100%, 5px 100%, 5px 100%, 5px 100%, 5px 100%, 5px 100%, 5px 100%, 5px 100%, 0% 100%);
  }
}

Запускаемый фрагмент

1 Ответ

1 голос
/ 20 октября 2019

Вы можете попробовать 

.get-started:not(:hover):after {}

с перевернутой анимацией. Но он может иметь нежелательное поведение при начальной загрузке страницы, я думаю, он всегда начинается с этой анимации. Иногда вы не можете избежать JavaScript. Добавление класса на mouseout и повторное его удаление на mouseenter может работать, поэтому вы можете назначить этому классу обратную анимацию. 

var els = document.querySelectorAll('.get-started');
for (var i = 0; i < els.length; i++) {
    els[i].addEventListener('mouseleave', function(e) {
        e.target.classList.add('mouseleaveAnimationClass');
    });
    els[i].addEventListener('mouseenter', function(e) {
        e.target.classList.remove('mouseleaveAnimationClass');
    });
}
...