animate css动画库 实现hover添加动画

Animate CSS 动画库以其显著的知名度在动画设计中独树一帜。它凭借其简洁的使用方式，只需为元素添加特定的class，即可轻松实现动画效果。然而，通常人们期待在鼠标悬停（hover）时触发这些动画，这就需要额外的编程处理，如在JavaScript框架如Vue中，通过事件监听动态添加class。

然而，这种做法并非最佳实践，因为它可能导致JavaScript变量的大量积累，特别是在动画频繁出现时。许多其他动画库倾向于提供自定义的@keyframes代码，用户可以直接修改和使用，这种方式更为高效。

然而，一个巧妙的解决方案在于，Animate CSS官网其实已经暗示了可能的解决方案。事实上，我们完全可以在hover类的定义中直接添加animation属性，这样既避免了额外的JavaScript操作，又能实现hover时的动画效果，既直观又高效。