如何无限地设置动画（无限属性无法正常工作）？

Question

我想无限地制作点的动画，例如：第一次向上，第二次向下，第三次向上，第四次向下，然后第一次向上，第二次向下等等。如果我在动画中添加无限属性尽管有延迟，但一切都充满活力。

[Codepen](https://codepen.io/jagus00/pen/dyyJjaK)

Answer 1

您必须将 "pause" 句点放在动画本身中，将其迭代设置为 infinite。要更改速度，您可以使用动画的持续时间 and/or 个百分比。

@keyframes goUp {
  0% {
    transform: translateY(0);
  }
  12.5% {
    transform: translateY(50px);
  }
  25% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes goDown {
  0% {
    transform: translateY(0);
  }
  12.5% {
    transform: translateY(-50px);
  }
  25% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
* {
  box-sizing: border-box;
}

body {
  background: #f9f9f9;
}

.dots {
  display: flex;
  justify-content: center;
  margin-top: calc(50vh - 50px);
}
.dots i:nth-child(1) {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  margin: auto 15px;
  background: #ff9600;
  animation: goUp 1.6s ease-in-out infinite;
}
.dots i:nth-child(2) {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  margin: auto 15px;
  background: #383838;
  animation: goDown 1.6s 0.4s ease-in-out infinite;
}
.dots i:nth-child(3) {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  margin: auto 15px;
  background: #ff9600;
  animation: goUp 1.6s 0.8s ease-in-out infinite;
}
.dots i:nth-child(4) {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  margin: auto 15px;
  background: #383838;
  animation: goDown 1.6s 1.2s ease-in-out infinite;
}

<div class="dots">
      <i></i>
      <i></i>
      <i></i>
      <i></i>
</div>

使用 SASS 语法：

@mixin dot
    height: 50px
    width: 50px
    border-radius: 50%
    margin: auto 15px

@keyframes goUp
    0%
        transform: translateY(0)
    12.5%
        transform: translateY(50px)
    25%
        transform: translateY(0)
    100%
        transform: translateY(0)
@keyframes goDown
    0%
        transform: translateY(0)
    12.5%
        transform: translateY(-50px)
    25%
        transform: translateY(0)
    100%
        transform: translateY(0)
*
    box-sizing: border-box
body
    background: #f9f9f9
.dots
    display: flex
    justify-content: center
    margin-top: calc(50vh - 50px)
    i:nth-child(1)
        @include dot
        background: #ff9600
        animation: goUp 1.6s ease-in-out infinite
    i:nth-child(2)
        @include dot
        background: #383838
        animation: goDown 1.6s .4s ease-in-out infinite
    i:nth-child(3)
        @include dot
        background: #ff9600
        animation: goUp 1.6s .8s ease-in-out infinite
    i:nth-child(4)
        @include dot
        background: #383838
        animation: goDown 1.6s 1.2s ease-in-out infinite

如何无限地设置动画（无限属性无法正常工作）？

How to animate infinitly (infinite property is not working properly)?

css

animation

sass

jquery-animate

如何无限地设置动画（无限 属性 无法正常工作）？

How to animate infinitly (infinite property is not working properly)?

css

animation

sass

jquery-animate

如何无限地设置动画（无限属性无法正常工作）？