Анимация при наведении возвращается к началу после завершения анимации

Question

Пример здесь:

https://codepen.io/rfehre/pen/mKryEV

CSS

.intro-side3.out {
  animation-name: out;
  animation-duration: 2s;
}

.intro-side3.over {
  animation-name: in;
  animation-duration: 2s;
}

@-webkit-keyframes out {
    0%{background-position:100% 49%}
    100%{background-position:0% 52%}
}

@-webkit-keyframes in {
    0%{background-position:0% 52%}
    100%{background-position:100% 49%}
}

Javascript

$('.intro-side3').hover(
function() {
  $(this).removeClass('out').addClass('over');
},
  function() {
    $(this).removeClass('over').addClass('out');
  }
);

Я пытаюсь сделать градиентную анимациюпри наведении курсора, а затем повернуть эту анимацию, когда вы выключаете мышь.Он не идеален, но по большей части работает нормально.Кроме того, если вы наведите курсор мыши на более чем 2 секунды, градиент возвращается в исходное состояние.Я не уверен почему.

Я, наверное, упускаю что-то очевидное, верно?

Answer 1

использовать animation-fill-mode: forwards; свойство

https://codepen.io/anon/pen/BVLyvm

Вы можете достичь того же без JavaScript

@import url(https://fonts.googleapis.com/css?family=Montserrat:300);
@import url(https://fonts.googleapis.com/css?family=Montserrat:800);
@import url(https://fonts.googleapis.com/css?family=Montserrat:600);

.bold-600 {
  font-family: montserrat;
  font-weight: 600;
}

.main {
  padding-left: 0;
}

.main2 {
  padding-left: 0;
  padding-top: 10px;
}

.intro-side3 {
  padding: 2rem;
  height: 400px;
  font-size: 24px;
  color: white;
  font-family: montserrat;
  background: linear-gradient(270deg, #662d91, #00aeef, #ec008c);
  background-size: 600% 600%;
  animation-name: out;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

.intro-side3:hover {
  animation-name: in;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@-webkit-keyframes out {
  0% {
    background-position: 100% 49%
  }
  100% {
    background-position: 0% 52%
  }
}

@-webkit-keyframes in {
  0% {
    background-position: 0% 52%
  }
  100% {
    background-position: 100% 49%
  }
}

<div class="main2 col-lg-3 col-md-4">
  <h1 style="font-family:montserrat; font-size:24px; padding:20px;">Hover /w Reverse</h2>
    <div class="intro-side3 gradientbg">
      <div class="inner">
        <p>We are here to <span class="bold-600"> do things</span> and <span class="bold-600">also maybe some stuff.</span>
      </div>
    </div>
</div>

Answer 2

попробуйте добавить следующее свойство в CSS

animation-iteration-count: 1;