[CSS] Jak zrobić przesuwane tło?

W CSS3 można uzyskać efekt przesuwanego tła dzięki regułom animacji - @keyframes. Przesuwane tło można zaimplementować zarówno dla całej strony (tag body), jak i tylko dla wybranego elementu div.

Przykład

W poniższym przykładzie tworzymy efekt przesuwanego tła graficznego dla znacznika body, czyli dla całej strony. Animowane tło składać się będzie z 3 obrazów.

body {

  background-image: url('example.com/background-1.jpg'),
    url('example.com/background-2.jpg'), url('example.com/background-3.jpg');
  background-repeat: repeat-x;
  background-position: 0 0, 0 0, 0 0;
  animation: move1 20s linear infinite, move2 30s linear infinite,
    move3 40s linear infinite;
    
}

@keyframes move1 {

  0% {
    background-position: 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 100% 0, 100% 0, 100% 0;
  }
  
}

@keyframes move2 {

  0% {
    background-position: 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 200% 0, 200% 0, 200% 0;
  }
  
}

@keyframes move3 {

  0% {
    background-position: 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 300% 0, 300% 0, 300% 0;
  }
  
}

Pamiętaj, aby podmienić adresy URL obrazów na własne. Prędkość animacji również możesz dostosować do własnych wymagań.