CODEWITHSUNDEEP
htmlcsskeyframe
Milloz
Milloz

Reputation: 55

css slideshow background has to load

I made a simple css slideshow for my background with keyframe and I have resized the pictures to about 60kb each, (they look awfull but I was testing to see if it would work) and to my surprise it didnt work, the pictures still have to load up.

This is my css for my slideshow, not sure if it can help but I'll put it up anyway. 

body {
  background-size: cover;
  animation: div 20s infinite;
  height: 100vh;
  margin: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: darken;
}



html {
  background: rgba(255, 255, 255, 0.53);
}

@keyframes div {
  0% {
    background-image: url("test.jpg");
  }

  20% {
    background-image: url("test.jpg");
  }

  40% {
    background-image: url("test2.jpg");
  }

  80% {
    background-image: url("test2.jpg");
  }

  100% {
    background-image: url("test.jpg");
  }

Upvotes: 1

Views: 74

Answers (2)

Ziku
Ziku

Reputation: 461

create a temporary div for any of the keyframes you want to use and start the animation in the background when the page loads. Something like this:

.temp-hidden-div {
    animation: div 1 100ms; 
    /*it's better to put a smaller duration here since this animation must run for the 
    shortest amount of time possible*/
}

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 273904

Load all of them initially otherwise you need to wait for the loading inside the keyframe even if the size of the image is small. You can then animate the background-size to show one at time

body {
  animation: div 5s infinite;
  height: 100vh;
  margin: 0;
  background-image:
    url(https://i.picsum.photos/id/110/800/800.jpg),
    url(https://i.picsum.photos/id/151/800/800.jpg),
    url(https://i.picsum.photos/id/127/800/800.jpg),
    url(https://i.picsum.photos/id/251/800/800.jpg),
    url(https://i.picsum.photos/id/126/800/800.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

html {
  background: rgba(255, 255, 255, 0.53);
}

@keyframes div {
  20% {
    background-size: cover,0 0,0 0,0 0,0 0;
  }

  40% {
    background-size: 0 0,cover,0 0,0 0,0 0;
  }

  60% {
    background-size: 0 0,0 0,cover,0 0,0 0;
  }

  80% {
    background-size: 0 0,0 0,0 0,cover,0 0;
  }

  100% {
    background-size: 0 0,0 0,0 0,0 0,cover;
  }
}

Upvotes: 2

Related Questions