jquery - 用jquery启动CSS3动画

当您单击按钮时，我正在尝试使用jquery启动此特定CSS动画。不知道如何。有任何想法吗？

谢谢

    <button>Click here to start the animation!!</button>
    <div id="ball"></div>

#ball {
    background:tomato;
    height:50px;
    width:50px;
    border-radius:200px;
    position:absolute;
    animation:bounce 3s infinite;
    -webkit-animation:bounce 3s infinite;
    top:40px;
}
@-webkit-keyframes bounce {
    50% {
        top: calc(100% - 50px);
    }
}
@keyframes bounce {
    50% {
        top: calc(100% - 50px);
    }
}

最佳答案

一种非常简单的方法是将CSS动画属性放在单独的类上，然后在单击按钮时切换该类。
EXAMPLE HERE

#ball.animate {
    animation:bounce 3s infinite;
    -webkit-animation:bounce 3s infinite;
}

jQuery的：

$('button').on('click',function(){
    $('#ball').toggleClass('animate');
});