Tambahkan animasi pada sifat imej latar belakang dalam teg badan: panduan langkah demi langkah

Question

Saya menggunakan imej latar belakang dalam tag gaya.

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

Saya mahu imej pudar tanpa menambah div berasingan pada halaman. Adakah matlamat ini boleh dicapai?

Answer 1

Ya, boleh. Anda boleh melakukan ini.

@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

Ini adalah kaedah CSS sahaja. Walau bagaimanapun, terdapat kaveat, CSS tidak boleh menunggu acara, jadi ia tidak mempunyai cara untuk mengetahui bila keseluruhan tapak telah dimuatkan.

Sebaliknya, dalam coretan ini, ia menunggu 1 saat sebelum mula memperkenalkan imej latar belakang yang terletak pada badan sebelum unsur pseudo.

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.