Анимация элементов css

Question

Подскажите пожалуйста, есть окно. В ней рандомном расположены 3 элемента. Как я могу просчитать анимацию, что бы при рандомном top элементы доходили до низа и возвращались в начальное положение (как это делает красный шар). Позиция у элементов рандомная.

#card {
  width: 500px;
  height: 300px;
  background: gray;
  position: relative;
  /*overflow: hidden; ///Для наглядности///*/
}

.bounce {
  width: 10px;
  height: 10px;
  position: absolute;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border-radius: 50%;
}

.type_1 {
  background: red;
  animation-duration: 10s;
  left: 10%;
  top: 0px;
}

.type_2 {
  background: blue;
  animation-duration: 10s;
  left: 25%;
  top: 20%;
}

.type_3 {
  background: green;
  animation-duration: 10s;
  left: 50%;
  top: 30%;
}

@keyframes move {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(300px);
  }
}

<div id="card">
  <div class="bounce type_1"></div>
  <div class="bounce type_2"></div>
  <div class="bounce type_3"></div>
</div>

БЛОГ НА HUSL

Анимация элементов css

Ответы (0 шт):