Есть ли плагин или как реализовать, чтобы после загрузки страницы, фоновый бэкграунд плавно смещался по оси Y например, после появлялся следующий?

Question

[Сергей]

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

Answer 1

[Денис Инешин]

Примерно так: jsfiddle.net/IonDen/3b6w1jLu
И никакого JS)

<div class='anim'>
    <div class='animated anim-bg-1'></div>
    <div class='animated anim-bg-2'></div>
    <div class='animated anim-bg-1 dop'></div>
</div>

<div class='page'>
    <p>Контент страницы</p>
</div>

.anim {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
}

@keyframes GO {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(0, -200%); }
}

.animated {
  animation: GO 7s infinite;
}

.anim-bg-1 {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: red;
}

.dop {
    top: 200%;
}

.anim-bg-2 {
    position: absolute;
    top: 100%; left: 0;
    width: 100%; height: 100%;
    background: green;
}

.page {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    color: #fff;
}