时间戳

首页 > 解决方案 > 为什么我的关键帧动画不能在我的 div 上工作？

javascript - 为什么我的关键帧动画不能在我的 div 上工作？

问题描述

我目前正在构建一个跳棋游戏，我试图让一个工作动画代码在一个棋盘上工作，以便它慢慢移动到下一个位置。

这是我的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);

}

标签： javascriptjqueryhtmlcssdom

解决方案

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

这里是你编辑后的样式

.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

推荐阅读