Wednesday, October 16

Simple Image Crossfade Slideshow – CSS Animation

Before starting you have to make one folder and put four images in this folder which you want to the slideshow.

HTML

<!DOCTYPE html>
<html>
<head>
<title> Simple Image Crossfade Slideshow - CSS Animation</title>
<link rel ="stylesheet" href="style.css">
</head>
<body>
    <div class="wrap">
    <ul>
  <li><img width="800" height="400" src="img-1.jpg"></li>
  <li><img width="800" height="400"  src="img-2.jpg"></li>
  <li><img width="800" height="400" src="img-3.jpg"></li>
  <li><img width="800" height="400" src="img-4.jpg"></li>
</ul>
    </div>
    </body>
</html>

CSS

body {
 background: gray; 
}
.wrap{
  width: 800px;
  margin: auto;
  margin-top: 100px;
 
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
li {
    position: absolute;
}
img{
  border:5px solid #fff;
  border-radius: 3px;
  box-shadow: 0 0 5px 0 hsla(0,0%,30%, .3);
}
li:nth-child(4) {
  animation: xfade 16s 0s infinite;
}
li:nth-child(3) {
  animation: xfade 16s 4s infinite;
}
li:nth-child(2) {
  animation: xfade 16s 8s infinite;
}
li:nth-child(1) {
  animation: xfade 16s 12s infinite;
}
@keyframes xfade{
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
}

Leave a Reply

Your email address will not be published. Required fields are marked *