悬停动画在动画结束后恢复到开始

Question

此处示例：

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

尝试将以下属性添加到 CSS

动画迭代次数：1；

Answer 2

使用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>

悬停动画在动画结束后恢复到开始

Hover animation reverts to beginning after animation is finished

javascript

css

jquery

gradient

hover