I have a problem with this slideshow

Navigation
1

I've been trying to find the problem for the longest time (note: I'm a beginner in this area), it happens that when the background changes the image, in a small interval it's like a flash, and how I changed from jquery to css, because was not managing to soften the slider effect, this flash is annoying me. And the interesting thing that only happens in the first loop, then it continues to exchange images normally. Anyway the code is here, I hope you help me. 

.body{
    overflow-x: hidden;
    background-image: url("imagens/fundo.png");
    background-repeat: no-repeat;
    background-size: cover;
    animation: linear;
    animation-name: body;
    animation-duration: 30s;
    animation-iteration-count: infinite; 
    animation-delay: .1s;
}'
'@keyframes body{
    0%  {background-image: url("imagens/slide.jpg"); background-size: 100% 100%;}   
    20%  {background-image: url("imagens/slide1.jpg"); background-size: 100% 100%;}
    40%  {background-image: url("imagens/slide2.jpg"); background-size: 100% 100%;}
    60%  {background-image: url("imagens/slide3.jpg"); background-size: 100% 100%;}
    80%  {background-image: url("imagens/slide4.jpg"); background-size: 100% 100%;}
    100%{background-image: url("imagens/slide5.jpg"); background-size: 100% 100%;}
    }
    
asked by anonymous 06.06.2017 / 04:34

1 answer

1

It turns out that the images are being downloaded the moment the CSS changes the frame. Add this code on the page just to ensure that the images are already loaded and thus to avoid having to change via css, there is this little flash. 

<div class="pre-load-images" style="display:none">
  <img src="imagens/slide.jpg" alt="">
  <img src="imagens/slide1.jpg" alt="">
  <img src="imagens/slide2.jpg" alt="">
  <img src="imagens/slide3.jpg" alt="">
  <img src="imagens/slide4.jpg" alt="">
  <img src="imagens/slide5.jpg" alt="">
</div>
    
08.06.2017 / 13:27
How do I edit an element of this array? How can I add paragraphs in a TEXTAREA TAG?