如何在悬停它们时使按钮/元素生动？

Question

我有一个我正在考虑的例子，因为我无法真正描述它，我希望人们不会介意我直接链接到商业网站，但无论如何：

https://www.bladux.com/shared-hosting

在底部附近有一个包含6个div元素的片段，当您将鼠标悬停在每个元素上时，它们会以类似的方式生成动画。

起初我怀疑onmouseenter上静止的背景图像正在被GIF取代但后来我意识到onmouseleave以某种方式“反转”动画从动画完成时发生在动画片上的点。

我很想从技术角度了解某人如何做到这一点，我不需要任何细节或例子。我只是想不出任何过去的GIF。

Answer 1

处理动画最干净的方法是使用纯CSS，这样就不会不必要地使用样式逻辑来破坏你的Javascript代码。根据我的经验，如果你能在CSS中处理这些事情，那通常是最好的解决方案。

Here's an example如何实现你想要完成的基本效果。

这里要注意的关键要素是变换和过渡。没有必要的JS。