javascript - 我将如何在其最后一帧保持下降动画？

我所拥有的一切都按预期工作，但我正在努力使粉色糖果/圆点留在空白区域的底部。我试过“前进”，但它仍然没有用。我可能有问题。目前粉红色的点/糖果正在上升回到原来的位置。

var leftB =
  document.querySelector("#button1")
leftB.addEventListener("click", moveLeft, false);

var rightB =
  document.querySelector("#button2")
rightB.addEventListener("click", moveRight, false);

var circleP =
  document.querySelector(".pumpkin")

var positionC = 0;

function moveLeft() {
  positionC = positionC - 50;
  // position -= 100;
  circleP.style.transform = "translateX(" + positionC + "px)";
}

function moveRight() {
  positionC = positionC + 50;
  circleP.style.transform = "translateX(" + positionC + "px)";
}



var myBody =
  document.querySelector("body")

var candy = [];

for (var i = 0; i < 100; i++) {

  var myRandom = Math.random() * 100; // max 100
  var myRandom2 = Math.random() * 5;

  candy[i] = document.createElement("div"); ///<div> </div>
  candy[i].setAttribute("id", "candy" + i);
  candy[i].setAttribute("class", "dots");
  candy[i].style.left = myRandom + "vw";
  candy[i].style.animation = "falling 3s ease-in " + myRandom2 + "s forwards";

  myBody.appendChild(candy[i]);
}

.pumpkin {
  position: absolute;
  width: 100px;
  height: 80px;
  border-radius: 50%;
  background-color: rgb(221, 119, 55);
}

#pumpkin2 {
  position: absolute;
  bottom: 12vw;
  left: 46vw;
  width: 100px;
  height: 80px;
  border-radius: 50%;
  background-color: rgb(221, 119, 55);
}

#pumpkin3 {
  position: absolute;
  bottom: 0vw;
  left: 3vw;
  width: 100px;
  height: 80px;
  border-radius: 50%;
  background-color: rgb(221, 119, 55);
}

#stem {
  position: absolute;
  top: -2vw;
  left: 6.5vw;
  width: 10px;
  height: 25px;
  background-color: green;
  border-radius: 70px
}

#button1 {
  position: absolute;
  left: 10vw;
  bottom: 3vw;
  width: 100px;
  height: 50px;
  border-radius: 10%;
  background-color: darkorange;
}

#button2 {
  position: absolute;
  left: 80vw;
  bottom: 3vw;
  width: 100px;
  height: 50px;
  border-radius: 10%;
  background-color: darkorange;
}

#base {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100px;
  background-color: black;
  z-index: -1;
}

#left {
  color: black;
  text-align: center;
  line-height: 6.5vh;
  font-family: sans-serif;
}

#right {
  color: black;
  text-align: center;
  line-height: 6.5vh;
  font-family: sans-serif;
}

.dots {
  position: absolute;
  top: -5vh;
  left: 0;
  width: 15px;
  height: 15px;
  background-color: hotpink;
  border-radius: 50%;
  animation: falling 3s ease-in forwards;
}

@keyframes falling {
  from {
    transform: scaleY(1), translateY(0vh)
  }
  30% {
    transform: translateY(90vh)
  }
  to: {
    transform: translateY(90vh)
  }
}

<body>
  <div class="pumpkin" id="pumpkin2">
    <div class="pumpkin" id="pumpkin3"> </div>
    <div class="pumpkin" id="stem"> </div>
  </div>
  <div id="button1">
    <div id="left"> Left </div>
  </div>
  <div id="button2">
    <div id="right"> Right </div>
  </div>
  <div id="Base"> </div>
</body>

我对这些语言还是陌生的，所以所有这些 Javscript 有点吓人。我认为错误出在我的动画或我的 candy[i].style.animation 上。

最佳答案

您的 @keyframes 规则集包含无效的 to 声明，因为您在 之后使用了冒号字符 (:) to 标记，这是无效的语法。当 CSS 解释器不知道将 动画化到 的位置时，它会动画化回 initial 属性值。

删除冒号 (:) 字符，您的动画将按预期运行:

var leftB =
  document.querySelector("#button1")
leftB.addEventListener("click", moveLeft, false);

var rightB =
  document.querySelector("#button2")
rightB.addEventListener("click", moveRight, false);

var circleP =
  document.querySelector(".pumpkin")

var positionC = 0;

function moveLeft() {
  positionC = positionC - 50;
  // position -= 100;
  circleP.style.transform = "translateX(" + positionC + "px)";
}

function moveRight() {
  positionC = positionC + 50;
  circleP.style.transform = "translateX(" + positionC + "px)";
}



var myBody =
  document.querySelector("body")

var candy = [];

for (var i = 0; i < 100; i++) {

  var myRandom = Math.random() * 100; // max 100
  var myRandom2 = Math.random() * 5;

  candy[i] = document.createElement("div"); ///<div> </div>
  candy[i].setAttribute("id", "candy" + i);
  candy[i].setAttribute("class", "dots");
  candy[i].style.left = myRandom + "vw";
  candy[i].style.animation = "falling 3s ease-in " + myRandom2 + "s forwards";

  myBody.appendChild(candy[i]);
}

.pumpkin {
  position: absolute;
  width: 100px;
  height: 80px;
  border-radius: 50%;
  background-color: rgb(221, 119, 55);
}

#pumpkin2 {
  position: absolute;
  bottom: 12vw;
  left: 46vw;
  width: 100px;
  height: 80px;
  border-radius: 50%;
  background-color: rgb(221, 119, 55);
}

#pumpkin3 {
  position: absolute;
  bottom: 0vw;
  left: 3vw;
  width: 100px;
  height: 80px;
  border-radius: 50%;
  background-color: rgb(221, 119, 55);
}

#stem {
  position: absolute;
  top: -2vw;
  left: 6.5vw;
  width: 10px;
  height: 25px;
  background-color: green;
  border-radius: 70px
}

#button1 {
  position: absolute;
  left: 10vw;
  bottom: 3vw;
  width: 100px;
  height: 50px;
  border-radius: 10%;
  background-color: darkorange;
}

#button2 {
  position: absolute;
  left: 80vw;
  bottom: 3vw;
  width: 100px;
  height: 50px;
  border-radius: 10%;
  background-color: darkorange;
}

#base {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100px;
  background-color: black;
  z-index: -1;
}

#left {
  color: black;
  text-align: center;
  line-height: 6.5vh;
  font-family: sans-serif;
}

#right {
  color: black;
  text-align: center;
  line-height: 6.5vh;
  font-family: sans-serif;
}

.dots {
  position: absolute;
  top: -5vh;
  left: 0;
  width: 15px;
  height: 15px;
  background-color: hotpink;
  border-radius: 50%;
  animation: falling 3s ease-in forwards;
}

@keyframes falling {
  from {
    transform: scaleY(1), translateY(0vh)
  }
  30% {
    transform: translateY(90vh)
  }
  to {
    transform: translateY(90vh)
  }
}

<body>
  <div class="pumpkin" id="pumpkin2">
    <div class="pumpkin" id="pumpkin3"> </div>
    <div class="pumpkin" id="stem"> </div>
  </div>
  <div id="button1">
    <div id="left"> Left </div>
  </div>
  <div id="button2">
    <div id="right"> Right </div>
  </div>
  <div id="Base"> </div>
</body>

关于javascript - 我将如何在其最后一帧保持下降动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52712340/

javascript - 我将如何在其最后一帧保持下降动画？

上一篇：html - 无法将背景图像大小调整为响应式 View

下一篇：javascript - 对 JQuery 执行刷新以刷新选择器