Как анимировать бесконечно (бесконечное свойство не работает должным образом)? - PullRequest
Новая
       41

Как анимировать бесконечно (бесконечное свойство не работает должным образом)?

1 голос
/ 03 ноября 2019

Я хочу анимировать точки бесконечно, например: сначала вверх, второй вниз, третий вверх, четвертый вниз и затем сначала вверх, второй вниз и т. Д. Если я добавляю бесконечное свойство в анимацию, это как будто все оживляет, несмотря на задержку,

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

1 Ответ

0 голосов
/ 03 ноября 2019

Вы должны установить период "паузы" в самой анимации, установив ее итерацию на 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
...