Ajouter une animation à la propriété background-image dans la balise body : guide étape par étape

Question

J'utilise l'image d'arrière-plan dans la balise de style.

<style>
body {
 background-image: url("img.jpg");
 background-size: cover;
 transition: background-image 4s linear;
 }
</style>

Je souhaite que l'image apparaisse en fondu sans ajouter de div séparé à la page. Cet objectif peut-il être atteint ?

Answer 1

Oui, c'est possible. Tu peux le faire.

@keyframes mymove {
     from {
      /* background: white; */     
     }
     to {
      background: url("https://www.shutterstock.com/image-photo/welded-metal-chain-various-rigging-260nw-2238426561.jpg");
       }
}
body {        
        animation: mymove 2s infinite;
      }

Answer 2

Il s'agit d'une méthode CSS uniquement. Cependant, il y a une mise en garde : CSS ne peut pas attendre les événements, il n'a donc aucun moyen de savoir quand l'ensemble du site est chargé.

Au lieu de cela, dans cet extrait, il attend 1 seconde avant de commencer à introduire l'image d'arrière-plan située sur le pseudo-élément avant du corps.

body {
  width: 100vw;
  height: 100vh;
  /*just for demo */
  position: relative;
}

body::before {
  background-image: url(https://picsum.photos/id/1015/1024/768);
  background-size: cover;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
  animation: fadein 5s 1 1s linear forwards;
}

@keyframes fadein {
  to {
    opacity: 1;
  }
}

Hello, this is some text in the body. It will be seen even before the background starts to fade in.