CSS动画循环 - 下一循环应该从前一循环开始

Question

让我们说我有从上到下带红色方块的动画 - 事情发生在每5秒一次。一旦广场在5秒后跌落到底部，脚本将把我们的红色方块传送回顶部，这样循环就可以从顶部重新开始。事情看起来并不自然。

我想要实现的是从底部到顶部平滑地开始第二次循环，然后再从顶部到底部等，这样运动看起来自然流畅。换句话说 - 红色方块每5秒钟从顶部反弹到底部。有什么建议吗？

Answer 1

我认为你正在寻找。

可能会帮助你。

＆＃13;

＆＃13;

input()

＆＃13;

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  -webkit-animation-name: example;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: 3;
  -webkit-animation-direction: alternate;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
  animation-direction: alternate;
}

@-webkit-keyframes example {
  0% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
  50% {
    background-color: green;
    bottom: 0px;
    top: 200px;
  }
  100% {
    background-color: red;
    bottom: 0px;
    top: 0px;
  }
}

@keyframes example {
  0% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
  50% {
    background-color: green;
    bottom: 0px;
    top: 200px;
  }
  100% {
    background-color: red;
    bottom: 0px;
    top: 0px;
  }
}

＆＃13;

＆＃13;

＆＃13;