javascript - 为什么我的关键帧动画不能在我的 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