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

【问题标题】：Hover animation reverts to beginning after animation is finished动画结束后悬停动画恢复到开始
【发布时间】：2018-06-06 19:01:03
【问题描述】：

这里的例子：

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 秒，渐变将恢复到其初始状态。我不知道为什么。

我可能遗漏了一些明显的东西，对吧？

【问题讨论】：

标签： javascript jquery css hover gradient

【解决方案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>

【讨论】：

【解决方案2】：

尝试将以下属性添加到 CSS 中

动画迭代计数：1；

【讨论】：