如何无限动画（无限属性无法正常工作）？答案

【问题标题】：How to animate infinitly (infinite property is not working properly)?如何无限动画（无限属性无法正常工作）？
【发布时间】：2020-02-28 17:36:05
【问题描述】：

我想无限地为点设置动画，例如：第一次向上，第二次向下，第三次向上，第四次向下，然后是第一次向上，第二次向下等等。如果我向动画添加无限属性，它就像一切都在动画，尽管有延迟.

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

【问题讨论】：

标签： css animation sass jquery-animate

【解决方案1】：

您必须在动画本身中设置“暂停”时间段，将其迭代设置为infinite。要更改速度，您可以使用动画的持续时间和/或百分比。

@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

【讨论】：