Анимация фона (background) на чистом CSS

В этом примере я хочу показать, как можно создать фон с эффектом анимации на чистом CSS.
Тут я постарался объяснить и показать всё максимально детально, что бы у вас не оставалось вопросов 🙂

 

html, body {
  width: 100%; height: 100%;
}

body {

/*в background первая урл на картинку, это будет наша картинка с анимацией,
 а вторая картинка, наш статический фон, которому мы еще 
 зададим дополнительные стили */
  background: url(https://junnot.info/wp-content/uploads/2018/01/ribka84-e1516025801490.png),

              url(https://junnot.info/wp-content/uploads/2018/01/undear-e1516026008714.jpg)
              no-repeat center center fixed;
/*Далее мы масштабируем фон. */
  background-size: auto,cover;

  /*Задаем параметры анимации : название, скорость анимации, согласно какой функции
 времени должна происходить анимация каждого цикла между ключевыми кадрами,
 и устанавливаем бесконечный повтор анимации*/

  animation: bgAnim 20s linear infinite;
}

/*Дальше устанавливает правило для ключевых кадров*/

@keyframes bgAnim {
  from {
    background-position: 0px 0%, center center;
  }
  to {
    background-position: -1024px 0%, center center;
  }
}

 

ДЕМО:

 

Как видите, все очень просто.
А если у вас остались вопросы, вы всегда можете написать их в комментарии и я с радость отвечу на все, что вас интересует 😉

Оставьте ответ

comment-avatar

*