Javascript 通过USNGjQuery单击按钮时，如何让CSS动画运行？

我想我的CSS动画开始时，我点击按钮，由于作业简要说明从我的课程在大学我必须使用jquery这样做，有人能帮我吗

$（“按钮”）.onClick（函数（）{
$（“.florence”）.addClass（“.animate”）；
});
正文{
保证金：0；
填充：0；
}
#背景{
宽度：1024px；
高度：768px；
位置：绝对位置；
溢出：隐藏；
}
钮扣{
宽度：300px；
高度：100px；
颜色：#1F；
背景色：#fff；
位置：绝对位置；
顶部：500px；
左：300px；
z指数：1；
}
.天空{
位置：绝对位置；
排名：0；
左：0；
}	
.草{
位置：绝对位置；
顶部：568px；
左：0；
浮动：左；
-webkit动画持续时间：3s；
-webkit动画名称：草；
-webkit动画计时功能：正常缓解；
}
弗洛伦斯先生{
位置：绝对位置；
顶部：100px；
左：600px；
浮动：左；
z指数：1；
}
.制作动画{
-webkit动画持续时间：5s；
-webkit动画名称：佛罗伦萨；
-webkit动画计时功能：正常缓解；
}
.cloud1{
位置：绝对位置；
顶部：70像素；
左：50px；
浮动：左；
z指数：1；
-webkit动画持续时间：3s；
-webkit动画名称：cloudone；
-webkit动画计时功能：正常缓解；
}
.cloud2{
位置：绝对位置；
顶部：192px；
左：195px；
浮动：左；
z指数：1；
-webkit动画持续时间：3s；
-webkit动画名称：cloudtwo；
-webkit动画计时功能：正常缓解；
}
.cloud3{
位置：绝对位置；
顶部：100px；
左：515px；
浮动：左；
-webkit动画持续时间：3s；
-webkit动画名称：cloudthree；
-webkit动画计时功能：正常缓解；
}
.cloud4{
位置：绝对位置；
顶部：10px；
左：670px；
浮动：左；
-webkit动画持续时间：3s；
-webkit动画名称：cloudfour；
-webkit动画计时功能：正常缓解；
}
.cloud5{
位置：绝对位置；
顶部：70像素；
左：914px；
浮动：左；
-webkit动画持续时间：3s；
-webkit动画名称：cloudfive；
-webkit动画计时功能：正常缓解；
}
孙先生{
位置：绝对位置；
顶部：25px；
左：275px；
浮动：左；
-webkit动画持续时间：3s；
-webkit动画名称：sun；
-webkit动画计时功能：正常缓解；
}
@-webkit关键帧cloudone{
0% {
顶部：-300px；
左：100px；
}
70% {
顶部：75px；
}
100% {
顶部：70像素；
左：50px；
}
}
@-webkit关键帧cloudtwo{
0% {
顶部：-300px；
左：50px；
}
70% {
顶部：205px；
}
100% {
顶部：192px；
左：195px；
}
}
@-webkit关键帧cloudthree{
0% {
顶部：-150px；
左：565px；
}
70% {
顶部：110px；
}
100% {
顶部：100px；
左：515px；
}
}
@-webkit关键帧cloudfour{
0% {
顶部：-200px；
左：570px；
}
70% {
顶部：15px；
}
100% {
顶部：10px；
左：670px；
}
}
@-webkit关键帧cloudfive{
0% {
顶部：-300px；
左：1014px；
}
70% {
顶部：75px；
}
100% {
顶部：70像素；
左：914px；
}
}
@-webkit为太阳设置关键帧{
0% {
顶部：-300px；
左：100px；
}
70% {
顶部：65px；
}
100% {
顶部：25px；
左：275px；
}
}
@-webkit关键帧佛罗伦萨{
0% {
左：1024px；
}
100% {
左：600px；
}
}
@-webkit为草地设置关键帧{
0% {
顶部：590px；
}
100% {
顶部：568px；
}
}

荧光紫红色
开始
试试这个

  $('button').on('click',function(){

     $(".florence").addClass("animate");
  });

在
addClass（“.animate”）
中有一个不需要的点。
它的
click
而不是
onClick
或交替地
on（'click'，function（）{}）
您的.florence”-元素有两个类属性。你需要这样写：

<img class="florence animate" src="images/florence.png">

这对动画也不起作用。您需要稍微推迟第二步：

$('button').click(function(){
    $(".florence").removeClass("animate");
    setTimeout(function(){ 
        $(".florence").addClass("animate");
     },1);
});

现在可以了。请参见
$（el）。单击（函数…
，而不是
$（el）。再次单击（函数…
）也应该是
.addClass（'animate'）
，而不是.addClass（'.animate'）`。addClass方法假定类选择器（.），因此您只需添加类名。我也这样做了，但仍然不起作用。您是否同时尝试了这两种方法？您需要清楚地定义“它不起作用”的含义；确切地说，“不起作用”是什么？你预计会发生什么，会发生什么？您是否已将代码减少到尽可能少的程度/代码来演示您的问题？
$('button').click(function(){
    $(".florence").removeClass("animate");
    setTimeout(function(){ 
        $(".florence").addClass("animate");
     },1);
});