CSS3 Loop Animation

/*Downloaded from https://www.codeseek.co/dancasttro/css3-loop-animation-wyVJRQ */
    .content{
  height: 400px !important;
  /*margin: auto !important;*/
  overflow: hidden !important;
  width: 780px !important;
}

.imgholder{
  height: 400px;
  margin: auto;
  width: 780px;
}

.photo1 {
  width: 400px;
  height: 400px;
  opacity: 0;
  animation: fadeinphoto 7s;
  animation-iteration-count: 2, 0, infinite;
  float: left;
  position: relative;
  top: 0px;
  z-index: 1;
  background-color: red;
}

.photo2 {
  width: 400px;
  height: 400px;
  opacity: 0;
  animation: fadeinphoto 7s 7s;
  animation-iteration-count: 3, 0, infinite;
  float: left;
  position: relative;
  top: -400px;
  z-index: 1;
  background-color: green;
}
/* .photo3 {
  width: 400px;
  height: 400px;
  opacity:0;
  animation: fadeinphoto 7s 10s 1;
  float: left;
  position: relative;
  top: -800px;
  z-index: 1;
  background-color: gray;
}

.photo4 {
  width: 400px;
  height: 400px;
  opacity: 0;
  animation: fadeinphoto 7s 15s 1;
  float: left;
  position: relative;
  top: -1200px;
  z-index: 1;
  background-color: yellow;
} */

/* .photo5 {
  width: 400px;
  height: 400px;
  opacity: 0;
  animation: fadeinphoto 7s 20s 1 infinite alternate;
  float: left;
  position: relative;
  top: -1600px;
  z-index: 1;
  background-color: blue;
} */

/* Animation Keyframes*/
@keyframes fadeinphoto {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

/*Downloaded from https://www.codeseek.co/dancasttro/css3-loop-animation-wyVJRQ */