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?

@-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