html,body { height: 100%; }
.center {
  height: 300px;
  width: 300px;
  margin: auto;
  dislay: flex;
  background: gray;
  justify-content: center;
  text-align: center;
}

.imgbox{
  background-size: cover;
  height: 300px;
  width: 300px;
}

#img1{
  position: absolute;
  z-index: 3;
  animation: xfade 15s -0s infinite;
  animation-timing-function: ease-in-out;
}

#img2{
  position: absolute;
  z-index: 2;
  animation: xfade 15s -5s infinite;
  animation-timing-function: ease-in-out;
}

#img3{
  position: absolute;
  z-index: 1;
  animation: xfade 15s -10s infinite;
  animation-timing-function: ease-in-out;
}

@keyframes xfade{

     0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}