CODEWITHSUNDEEP
htmlcssanimationslider
Дмитрий Годын
Дмитрий Годын

Reputation: 25

Why does my slider has blinking in first round?

My slider has "blinking" in first round of sliding and after that slides perfectly without any blinks. How to remove the blinks?

My code:

HTML:

<div class="slider"></div>

CSS:

* {
    margin: 0px;
    padding: 0px;
}

body {
    background-color: #444;
}

.slider {
    width: 600px;
    height: 400px;

    margin: 100px auto;

    background-image: url(image/1.jpg);
    background-repeat: no-repeat;
    background-size: cover;

    animation: slide 12s infinite;
    transition: 600ms;

    box-shadow: 0 0px 50px rgba(0, 0, 0, 1), inset 0 0px 400px rgba(0, 0, 0, .6);
    border-radius: 5px;
}

@keyframes slide {
    20% {
        background-image: url(image/2.jpg);
    }
    40% {
        background-image: url(image/3.jpg);
    }
    60% {
        background-image: url(image/4.jpg);
    }
    80% {
        background-image: url(image/5.jpg);
    }
    100% {
        background-image: url(image/1.jpg);
    }
}

The first slide round has this effect, where it's not smooth, and after the first round others round exactly show I want them to be.. Any help please? Sorry if the post isn't good, I write first time here. Thank you

I tried to make the slider full screen, at the blinking remains the same, it's a white blink during the first round, a no white blinking between slide items after first round

Upvotes: 0

Views: 1634

Answers (1)

volt
volt

Reputation: 1003

Like I mentioned in my comment, the blinking is caused by the fact that the image are not loaded yet in the first round. You can try to preload the images by adding them as <img> tags in a hidden div like so 

* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: #444;
}

.slider {
  width: 600px;
  height: 400px;
  margin: 100px auto;
  background-image: url(https://via.placeholder.com/399);
  background-repeat: no-repeat;
  background-size: cover;
  animation: slide 12s infinite;
  transition: 600ms;
  box-shadow: 0 0px 50px rgba(0, 0, 0, 1), inset 0 0px 400px rgba(0, 0, 0, .6);
  border-radius: 5px;
}

@keyframes slide {
  20% {
    background-image: url(https://via.placeholder.com/400);
  }
  40% {
    background-image: url(https://via.placeholder.com/401);
  }
  60% {
    background-image: url(https://via.placeholder.com/402);
  }
  80% {
    background-image: url(https://via.placeholder.com/403);
  }
  100% {
    background-image: url(https://via.placeholder.com/404);
  }
}

.hidden {
  display: none;
}
<div class="slider"></div>

<div class="hidden">
  <img src="https://via.placeholder.com/399">
  <img src="https://via.placeholder.com/400">
  <img src="https://via.placeholder.com/401">
  <img src="https://via.placeholder.com/402">
  <img src="https://via.placeholder.com/403">
  <img src="https://via.placeholder.com/404">
</div>

Upvotes: 2

Related Questions