Fade In and Fade Out Slideshow

[java]

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

What should I do to make it into fade in and fade out effect, I've tried to change the opacity but failed to work?

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto

Edited August 16, 2017 by java

[dsonesuk]

Use percentages, along with fill mode

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
   animation-fill-mode: forwards;
}
@-webkit-keyframes fade {
  0% {opacity: .4} 
  50% {opacity: 1}
  100% {opacity:0.4}
}

 

Edited August 16, 2017 by dsonesuk

[java]

3 hours ago, dsonesuk said:

Use percentages, along with fill mode

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
   animation-fill-mode: forwards;
}
@-webkit-keyframes fade {
  0% {opacity: .4} 
  50% {opacity: 1}
  100% {opacity:0.4}
}

 

How about crossfade? Is it possible?

Edited August 16, 2017 by java

[dsonesuk]

Yes! its possible, bit complicated, The idea is to get the previous image, and place it as a background using position: absolute with low z-index, then fade in what will be next image with higher z-index, because this image is layered above the bg image it will give effect that both are cross fading, but only the top layered image is.