css - 如何无限动画(无限属性不能正常工作)？

Question

我想无限地为点设置动画，例如:首先向上，第二个向下，第三个向上，第四个向下，然后首先向上，第二个向下等等。如果我向动画添加一个无限属性，就像所有东西都在动画一样尽管有延迟.

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

Answer 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