Почему анимация ключевых кадров не работает на моем 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>