当不再悬停时，如何使CSS动画轻松回到位置？

在我的示例中，我使用了。我真的很喜欢悬停效果，但一旦我停止悬停，它就会摇回原来的位置。我怎样才能使我的潜水器恢复正常姿势

动画CSS:

animation-name: hvr-bob-float, hvr-bob;
animation-duration: .3s, 1.5s;
animation-delay: 0s, .3s;
animation-timing-function: ease-out, ease-in-out;
animation-iteration-count: 1, infinite;
animation-fill-mode: forwards;
animation-direction: normal, alternate;

---

jsfiddle:

您可以使用伪元素创建圆，并使用

hvr-bob

为其设置动画。然后在其父对象上使用变换来模拟

hvr bob float

动画。这不是很好，但它减少了一些突然性

/*Bob*/
@-webkit关键帧hvr bob{
50% {
-webkit转换：translateY（4px）；
变换：translateY（4px）；
}
}
@关键帧hvr-bob{
50% {
-webkit转换：translateY（4px）；
变换：translateY（4px）；
}
}
伯伯先生{
显示：内联块；
高度：80px；
宽度：80px；
利润率：2%；
垂直对齐：中间对齐；
-webkit转换：translateZ（0）；
变换：translateZ（0）；
长方体阴影：0 1px rgba（0,0,0,0）；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
-moz osx字体平滑：灰度；
/*在父级上使用转换*/
-webkit过渡：转换0.3s缓解；
过渡：0.3s的过渡；
}
/*使用伪元素的圆*/
鲍勃：以前{
内容：“；
显示：块；
背景色：#DDDDDD；
边界半径：100%；
宽度：100%；
身高：100%；
}
/*在父对象上使用变换*/
.hvr bob:悬停，.hvr bob:聚焦，.hvr bob:激活{
-webkit转换：translateY（-8px）；
转换：translateY（-8px）；
}
.hvr-bob:悬停：之前.hvr-bob:焦点：之前.hvr-bob:活动：之前{
-webkit动画名称：hvr-bob；
动画名称：hvr-bob；
-webkit动画持续时间：1.5s；
动画持续时间：1.5s；
-webkit动画延迟：.3s；
动画延迟：.3s；
-webkit动画计时功能：轻松输入输出；
动画计时功能：轻松进出；
-webkit动画迭代计数：无限；
动画迭代次数：无限；
-webkit动画填充模式：正向；
动画填充模式：正向；
-webkit动画方向：交替；
动画方向：交替；
}

---

可能重复@MaximillianLaumeister的说法——“Vals”的回答似乎解决了我这样的问题，但他在回答中做了什么（至少对我来说）并不完全清楚。我现在正在研究这个问题，一旦我能理解他的答案，我会尽快结束这个话题。