You can give fade effect animation for image slideshow using CSS. @keyframes ‘at’ rule and animation keyword in CSS can be used to make image slideshow with fade effect. With @keyframes ‘at’ rule, you can define the properties that will be animated in an animation rule and animation keyword to set all of the animation properties. Here I have used different types of animation properties like animation-name, animation-duration, animation-timing-function and animation-iteration-count. Where animation-name specifies name of the animation, animation-duration specifies animation duration in second(s) or milisecond(ms), animation-timing-function specifies how the animation will play like ease, ease-in, ease-in-out, ease-out and linear and animation-iteration-count:number of times animation should play.
Simple fade effect image slideshow
Here is a sample CSS code for creating simple fade effect image slideshow written for safari browser.
<style type="text/css"> @-webkit-keyframes fade{ from {opacity:.5;} 50% {opacity:1;} to {opacity:.5;} } #anim1 {-webkit-animation-name:fade;-webkit-animation-duration:5s; -webkit-animation-iteration-timing-function:linear; position:relative;-webkit-animation-iteration-count:infinite;} </style>
Here is a full HTML code along with required JavaScript code for creating simple fade effect image slideshow.
<head> <title>CSS Animations</title> <style type="text/css"> @-webkit-keyframes fade{ from {opacity:.5;} 50% {opacity:1;} to {opacity:.5;} } @-moz-keyframes fade{ from {opacity:.5;} 50% {opacity:1;} to {opacity:.5;} } @-o-keyframes fade{ from {opacity:.5;} 50% {opacity:1;} to {opacity:.5;} } @-ms-keyframes fade{ from {opacity:.5;} 50% {opacity:1;} to {opacity:.5;} } #anim1 {-webkit-animation-name:fade;-webkit-animation-duration:5s; -webkit-animation-iteration-timing-function:linear;position:relative; -webkit-animation-iteration-count:infinite;-moz-animation-name:fade; -moz-animation-duration:5s;-moz-animation-iteration-timing-function:linear; -moz-animation-iteration-count:infinite;-o-animation-name:fade; -o-animation-duration:5s;-o-animation-iteration-timing-function:linear; -o-animation-iteration-count:infinite;-ms-animation-name:fade; -ms-animation-duration:5s;-ms-animation-iteration-timing-function:linear; -ms-animation-iteration-count:infinite;} </style> <script language="JavaScript"> var i = 0; var path = new Array(); // LIST OF IMAGES path[0] = "image1.jpg"; path[1] = "image2.jpg"; path[2] = "image3.jpg"; function swapImage1() { document.slide.src = path[i]; if(i < path.length - 1) i++; else i = 0; setTimeout("swapImage1()",5000); } window.onload=swapImage1; </script> </head> <body> <div id="anim1"><img height="400" name="slide" src="image_1.gif" width="600" /> </div> </body> </html>
In the above code prefixes -webkit-, -moz-, -o-, -ms- are used for browsers safari, firefox, opera and internet explorer respectively.
Here is a preview of image slideshow for the code above.
@-webkit-keyframes fade{from {opacity:.5;}
50% {opacity:1;}
to {opacity:.5;}
}
@-moz-keyframes fade{
from {opacity:.5;}
50% {opacity:1;}
to {opacity:.5;}
}
@-o-keyframes fade{
from {opacity:.5;}
50% {opacity:1;}
to {opacity:.5;}
}
@-ms-keyframes fade{
from {opacity:.5;}
50% {opacity:1;}
to {opacity:.5;}
}
#anim1 {-webkit-animation-name:fade;-webkit-animation-duration:5s;-webkit-animation-iteration-timing-function:linear;
position:relative;-webkit-animation-iteration-count:infinite;-moz-animation-name:fade;-moz-animation-duration:5s;-moz-animation-iteration-timing-function:linear;-moz-animation-iteration-count:infinite;-o-animation-name:fade;-o-animation-duration:5s;-o-animation-iteration-timing-function:linear;-o-animation-iteration-count:infinite;-ms-animation-name:fade;-ms-animation-duration:5s;-ms-animation-iteration-timing-function:linear;-ms-animation-iteration-count:infinite;}
var i = 0;
var path = new Array();
// LIST OF IMAGES
path[0] = “https://www.siteforinfotech.com/wp-content/uploads/2014/11/image1.jpg”;
path[1] = “https://3.bp.blogspot.com/–UBsuaVDrLM/VGMQO4DJD9I/AAAAAAAAAlk/uvOoQv40MhM/s1600/image2.jpg”;
path[2] = “https://1.bp.blogspot.com/-x9ngyMlv5HU/VGMQPAA_gFI/AAAAAAAAAlo/Vvabz0PBmCE/s1600/image3.jpg”;
function swapImage1()
{
document.slide.src = path[i];
if(i < path.length - 1) i++; else i = 0;
setTimeout("swapImage1()",5000);
}
window.onload=swapImage1;

Fade effect image slideshow with caption
You can add caption for this slideshow by adding following JavaScript codes within <script> tag.
// LIST OF CAPTİONS caption[0] = "Caption for the first image"; caption[1] = "Caption for the second image"; caption[2] = "Caption for the third image"; function swapImage(){ var el = document.getElementById("mydiv"); el.innerHTML=caption[i]; var img= document.getElementById("anim1"); img.src= image[i]; if(i <k ) { i++;} else { i = 0; }
For details on adding caption on image slideshow visit the post: How To Create Simple Image Slideshow Using JavaScript ?
Fade effect image slideshow with caption and link
You can add caption for this slideshow by adding following JavaScript codes within <script> tag.
var link= new Array(); link[0] = "https://www.siteforinfotech.com/"; link[1] = "https://www.siteforinfotech.com/p/tutorial.html"; link[2] = "https://www.siteforinfotech.com/p/mcqs.html"; function swapImage(){ var el = document.getElementById("mydiv"); el.innerHTML=caption[i]; var img= document.getElementById("anim1"); img.src= image[i]; var a = document.getElementById("link"); a.href= link[i]; if(i <k ) { i++;} else { i = 0; }
For details on adding caption and link on image slideshow visit the post: How to Create JavaScript Image Slideshow with Links