Javascript 悬停动画在动画完成后恢复为开始

示例如下：

CSS

Javascript

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

我试着在悬停时做一个渐变动画，然后在鼠标离开时反转动画。它并不完美，但在大多数情况下，它工作正常。除此之外，如果悬停时间超过当前指定的2秒，渐变将恢复到其初始状态。我不知道为什么

---

我可能错过了一些明显的东西，对吧

尝试将以下属性添加到CSS

---

动画迭代次数：1

使用

动画填充模式：向前属性


不使用javascript也可以实现同样的效果


@导入url(https://fonts.googleapis.com/css?family=Montserrat:300);
@导入url(https://fonts.googleapis.com/css?family=Montserrat:800);
@导入url(https://fonts.googleapis.com/css?family=Montserrat:600);
.bold-600{
字体系列：蒙特塞拉特；
字号：600；
}
梅因先生{
左侧填充：0；
}
.main 2{
左侧填充：0；
填充顶部：10px；
}
.简介3{
填充：2rem；
高度：400px；
字体大小：24px；
颜色：白色；
字体系列：蒙特塞拉特；
背景：线性梯度（270度，#662d91，#00aeef，#ec008c）；
背景尺寸：600%600%；
动画名称：out；
动画持续时间：2秒；
动画填充模式：正向；
}
.简介3：悬停{
动画名称：in；
动画持续时间：2秒；
动画填充模式：正向；
}
@-webkit关键帧输出{
0% {
背景职位：100%49%
}
100% {
背景职位：0%52%
}
}
@-中的webkit关键帧{
0% {
背景职位：0%52%
}
100% {
背景职位：100%49%
}
}

悬停/倒车
我们在这里做一些事情，也可能做一些事情。

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