我希望我的CSS动画在我单击按钮时开始，并且由于我在uni课程中的作业简要说明，我必须使用jquery来这样做，有人可以帮助我吗？
$('button').onClick(function(){
$(".florence").addClass(".animate");
});body{
margin:0;
padding:0;
}
#background {
width:1024px;
height:768px;
position:absolute;
overflow:hidden;
}
button {
width:300px;
height:100px;
color:#1f1f1f;
background-color:#fff;
position:absolute;
top:500px;
left:300px;
z-index:1;
}
.sky {
position:absolute;
top:0;
left:0;
}
.grass {
position:absolute;
top:568px;
left:0;
float:left;
-webkit-animation-duration: 3s;
-webkit-animation-name: grass;
-webkit-animation-timing-function: normal ease-out;
}
.florence {
position:absolute;
top:100px;
left:600px;
float:left;
z-index:1;
}
.animate {
-webkit-animation-duration: 5s;
-webkit-animation-name: florence;
-webkit-animation-timing-function: normal ease-out;
}
.cloud1 {
position:absolute;
top:70px;
left:50px;
float:left;
z-index:1;
-webkit-animation-duration: 3s;
-webkit-animation-name: cloudone;
-webkit-animation-timing-function: normal ease-out;
}
.cloud2 {
position:absolute;
top:192px;
left:195px;
float:left;
z-index:1;
-webkit-animation-duration: 3s;
-webkit-animation-name: cloudtwo;
-webkit-animation-timing-function: normal ease-out;
}
.cloud3 {
position:absolute;
top:100px;
left:515px;
float:left;
-webkit-animation-duration: 3s;
-webkit-animation-name: cloudthree;
-webkit-animation-timing-function: normal ease-out;
}
.cloud4 {
position:absolute;
top:10px;
left:670px;
float:left;
-webkit-animation-duration: 3s;
-webkit-animation-name: cloudfour;
-webkit-animation-timing-function: normal ease-out;
}
.cloud5 {
position:absolute;
top:70px;
left:914px;
float:left;
-webkit-animation-duration: 3s;
-webkit-animation-name: cloudfive;
-webkit-animation-timing-function: normal ease-out;
}
.sun {
position:absolute;
top:25px;
left:275px;
float:left;
-webkit-animation-duration: 3s;
-webkit-animation-name: sun;
-webkit-animation-timing-function: normal ease-out;
}
@-webkit-keyframes cloudone {
0% {
top:-300px;
left:100px;
}
70% {
top:75px;
}
100% {
top: 70px;
left:50px;
}
}
@-webkit-keyframes cloudtwo {
0% {
top:-300px;
left:50px;
}
70% {
top:205px;
}
100% {
top: 192px;
left:195px;
}
}
@-webkit-keyframes cloudthree {
0% {
top:-150px;
left:565px;
}
70% {
top:110px;
}
100% {
top:100px;
left:515px;
}
}
@-webkit-keyframes cloudfour {
0% {
top:-200px;
left:570px;
}
70% {
top:15px;
}
100% {
top:10px;
left:670px;
}
}
@-webkit-keyframes cloudfive {
0% {
top:-300px;
left:1014px;
}
70% {
top:75px;
}
100% {
top:70px;
left:914px;
}
}
@-webkit-keyframes sun {
0% {
top:-300px;
left:100px;
}
70% {
top:65px;
}
100% {
top:25px;
left:275px;
}
}
@-webkit-keyframes florence {
0% {
left:1024px;
}
100% {
left:600px;
}
}
@-webkit-keyframes grass {
0% {
top:590px;
}
100% {
top:568px;
}
}<!DOCTYPE html>
<html>
<head>
<title>Florence the Fluorescent Fuchsia</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="background">
<button>Start</button>
<img class="sky" src="images/sky.png">
<img class="grass" src="images/grass.png">
<img class="florence" class="animate" src="images/florence.png">
<img class="cloud1" src="images/cloud1.png">
<img class="cloud2" src="images/cloud2.png">
<img class="cloud3" src="images/cloud3.png">
<img class="cloud4" src="images/cloud4.png">
<img class="cloud5" src="images/cloud5.png">
<img class="sun" src="images/sun.png">
</div>
</body>
</html>最佳答案
尝试这个。
$('button').on('click',function(){
$(".florence").addClass("animate");
});
您在
addClass(".animate")中有一个不需要的点。并且它的
click是onClick或on('click',function(){})