Как сделать бесконечную зацикленную анимацию, можно js(jquery) или css?

Question

[Егорк Орнилов]

Нужно сделать анимацию, бесконечную, чтобы залетая в одну часть экрана, обьект сразу же вылезал из противоположной.
Получается просто зациклить, информацию нигде не могу найти. Каждый раз все объекты просто уходят за экран и после полного исчезновения всех появляются снова.

код анимации
(будет круто если будет jquery или нативный, а то сбивается параллакс)

.parallax {
    width: 100%;
    height: 100%;

    &__grey-circle,
    &__white-circle,
    &__red-circle {
        animation: animate 30s linear infinite;
    }
}

@keyframes animate {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(-100%);
    }
}

Comments

[Rerurk]

Тут наверное без школьной геометрии никак

Answer 1

[Karpion]

Самый простой способ: проверять координаты каждого объекта отдельно; и если они выходят за рамки, то приводить их снова куда надо, прибавляя или вычитая ширину/высоту экрана.

Возможно, объект надо будет отрисовывать несколько раз. Если объект пересекает вертикальную или горизонтальную границу экрана - то дважды; если накрывает угол - то четыре раза.