使用 Jquery 触发 css 动画

Question

我已经阅读了几个小时如何使用 jquery 触发 css 元素。我在这里阅读了很多论坛，但没有什么对我有用。我是编码新手并尝试在 jquery 中做一些简单的事情，但无法弄清楚。

这是我的 HTML：

<h1 class="Header">
        Hello!<div class="wave animate">???????? </div> 
    </h1>

这是我的 CSS：

.wave {
 animation-name: wave-animation;
 animation-duration: 2.5s;
 transform-origin: 70% 70%;
 display: inline-block;
}

@keyframes wave-animation {
  0% { transform: rotate( 0.0deg) }
 10% { transform: rotate(14.0deg) } 
 20% { transform: rotate(-8.0deg) }
 30% { transform: rotate(14.0deg) }
 40% { transform: rotate(-4.0deg) }
 50% { transform: rotate(10.0deg) }
 60% { transform: rotate( 0.0deg) }
100% { transform: rotate( 0.0deg) }
}

我已经为波浪设置了动画，并希望通过悬停触发动画。我知道这可以在 css 中轻松完成，但我一生都在尝试在 java/jquery 中完成。

任何帮助都将不胜感激，因为我觉得我已经尝试了所有我读过的可行选项。谢谢！

Answer 1

这里不需要 Jquery。只需在你的 CSS 中使用 :hover 即可。

.wave {
 display: inline-block;
}
.wave:hover{
 animation-name: wave-animation;
 animation-duration: 2.5s;
 transform-origin: 70% 70%;
}

@keyframes wave-animation {
  0% { transform: rotate( 0.0deg) }
 10% { transform: rotate(14.0deg) } 
 20% { transform: rotate(-8.0deg) }
 30% { transform: rotate(14.0deg) }
 40% { transform: rotate(-4.0deg) }
 50% { transform: rotate(10.0deg) }
 60% { transform: rotate( 0.0deg) }
100% { transform: rotate( 0.0deg) }
}

<h1 class="Header">
        Hello!<div class="wave animate">?? </div> 
    </h1>