为什么我的关键帧动画在我的 div 上不起作用？

Question

我目前正在构建一个跳棋游戏，我正试图获得一个可以工作的动画代码来处理一个棋盘，这样它就可以缓慢地移动到下一个位置。

这是我的css：

@keyframes animateCheckerPiece {
0% {top: 80px}
50% {top: 270px}
100% {top: 80px}
}
.redChecker {
height: 50px;
width: 50px;
background-color: red;
border: solid red 2px;
border-radius: 40px;
position: relative;
}

这是我的源代码：

<tr id="row_C">
<td id="C1" class="odd"></td>
<td id="C2" class="even"><div align="center"><div id="r9" class="redChecker" onClick="chooseMove(event);"></div></div></td>
<td id="C3" class="odd"></td>
<td id="C4" class="even"><div align="center"><div id="r10" class="redChecker" onClick="chooseMove(event);"></div></div></td>
<td id="C5" class="odd"></td>
<td id="C6" class="even"><div align="center"><div id="r11" class="redChecker" onClick="chooseMove(event);"></div></div></td>
<td id="C7" class="odd"></td>
<td id="C8" class="even"><div align="center"><div id="r12" class="redChecker" onClick="chooseMove(event);"></div></div></td>
</tr>

这是我的JavaScript:

var piece, getId;
function chooseMove(event) {
"use strict";
getId = event.target.id;
document.getElementById(getId).style.borderColor = "yellow";
$("td").addClass("hover");
$("#msg").html("Choose a spot to move to");
}
function movePiece(event) {
"use strict";
var piece = getId;
var getLocId = event.target.id;
$(piece).animate({ 
top: "-=30px",
}, 2000);
}

Answer 1

实际上，原因是你没有按照自己的风格调用动画

这是你编辑后的造型

.redChecker {
height: 50px;
width: 50px;
background-color: red;
border: solid red 2px;
border-radius: 40px;
position: relative;
animation: animateCheckerPiece 3.5s ease-in-out;
}

你可以在一行中添加其他选项

animation: name duration timing-function delay iteration-count direction fill-mode;

此外，请检查MDN及其工作方式https://developer.mozilla.org/en-US/docs/Web/CSS/animation

Answer 2

它与javascript无关。你的css代码是错误的。

var piece, getId;
function chooseMove(event) {
"use strict";
getId = event.target.id;
document.getElementById(getId).style.borderColor = "yellow";
$("td").addClass("hover");
$("#msg").html("Choose a spot to move to");
}
function movePiece(event) {
"use strict";
var piece = getId;
var getLocId = event.target.id;
$(piece).animate({ 
top: "-=30px",
}, 2000);
}

.redChecker {
height: 50px;
width: 50px;
background-color: red;
border: solid red 2px;
border-radius: 40px;
position: relative;
animation: animateCheckerPiece 2s linear;
}
@keyframes animateCheckerPiece {
0% {top: 80px}
50% {top: 270px}
100% {top: 80px}
}

<tr id="row_C">
<td id="C1" class="odd"></td>
<td id="C2" class="even"><div align="center"><div id="r9" class="redChecker" onClick="chooseMove(event);"></div></div></td>
<td id="C3" class="odd"></td>
<td id="C4" class="even"><div align="center"><div id="r10" class="redChecker" onClick="chooseMove(event);"></div></div></td>
<td id="C5" class="odd"></td>
<td id="C6" class="even"><div align="center"><div id="r11" class="redChecker" onClick="chooseMove(event);"></div></div></td>
<td id="C7" class="odd"></td>
<td id="C8" class="even"><div align="center"><div id="r12" class="redChecker" onClick="chooseMove(event);"></div></div></td>
</tr>