Flicking css animation

Question

Hello I wanted to make background images that will change for each other and I realized, that it is possible with CSS animation and keyframe, but after I code its first round of the photos flicks and after animation continues in the normal way (I think, that the problem is with WebGL which renders the content and images are not downloaded yet). Can you help me fix this code to prevent this?

.landing-page {
  background-image: linear-gradient(
    to bottom,
    rgba(104, 104, 104, 0),
    rgba(0, 0, 0, 0.739)
  );
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
  width: 100vw;
  background-position: center;
  display: flex;
  align-items: flex-end;
  animation: change 120s infinite ease-in-out;
}

@keyframes change {
  0% {
    background-image: url(/photos/profile1.jpg);
  }
  20% {
    background-image: url(/photos/profile3.jpg);
  }
  40% {
    background-image: url(/photos/profile4.jpg);
  }
  60% {
    background-image: url(/photos/profile5.jpg);
  }
  80% {
    background-image: url(/photos/profile6.jpg);
  }
  100% {
    background-image: url(/photos/profile2.jpg);
  }
}

user_15273968 · Answer

You can preload the images using link type preload :

The preload value of the element's rel attribute lets you declare fetch requests in the HTML's , specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page's render, improving performance. ref

...

There is also link type prefetch.

Also, put first frame at the end,100%, for smooth transition between each iteration:

@keyframes change {
  0% { background-image: url(/photos/profile1.jpg); }
  ...
  100% { background-image: url(/photos/profile1.jpg); }
}

Flicking css animation

1 Answers