使用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);
    }
}

单击此处开始动画！！
#球{
背景：番茄；
高度：50px；
宽度：50px；
边界半径：200px；
位置：绝对位置；
动画：无限反弹；
-webkit动画：弹跳3s无限；
顶部：40px；
}
@-webkit关键帧反弹{
50% {
顶部：计算（100%-50px）；
}
}
@关键帧反弹{
50% {
顶部：计算（100%-50px）；
}
}

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

jQuery：

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

---

为什么不直接使用纯CSS3呢？没有必要将jQUery加入到组合中。仅使用

：checked

伪选择器演示如何执行此操作

您可以尝试将动画添加到类中，然后通过jquery将该类中的元素赋予该类。

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