Edit in JSFiddle

<div class="slide01-element"></div>
<div class="slide02-element"></div>
<div class="slide03-element"></div>
<div class="slide04-element"></div>
<div class="slide05-element"></div>

body {
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
}


/*---------------SLIDE01------------*/

.slide01-element {
  position: absolute;
  animation: slide01-frames ease-in-out 25s;
  animation-iteration-count: infinite;
  -webkit-animation: slide01-frames ease-in-out 25s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation: slide01-frames ease-in-out 25s;
  -moz-animation-iteration-count: infinite;
  -o-animation: slide01-frames ease-in-out 25s;
  -o-animation-iteration-count: infinite;
  -ms-animation: slide01-frames ease-in-out 25s;
  -ms-animation-iteration-count: infinite;
  width: 100%;
  height: 100vh;
  background: url(http://xyndigital.com/wp-content/uploads/2015/11/1.jpg) no-repeat 0 0;
  background-size: cover;
}

@keyframes slide01-frames {
  0% {
    opacity: 0;
    transform: translate(0px, 0px) rotate(0deg);
  }
  5% {
    opacity: 1;
    transform: translate(0px, 0px) rotate(0deg);
  }
  20% {
    opacity: 1;
    transform: translate(0px, 0px) rotate(0deg);
  }
  25% {
    opacity: 0;
    transform: translate(0px, 0px) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(0px, 0px) rotate(0deg);
  }
}


/*---------------SLIDE02------------*/

.slide02-element {
  position: absolute;
  animation: slide02-frames ease-in-out 25s;
  animation-iteration-count: infinite;
  -webkit-animation: slide02-frames ease-in-out 25s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation: slide02-frames ease-in-out 25s;
  -moz-animation-iteration-count: infinite;
  -o-animation: slide02-frames ease-in-out 25s;
  -o-animation-iteration-count: infinite;
  -ms-animation: slide02-frames ease-in-out 25s;
  -ms-animation-iteration-count: infinite;
  width: 100%;
  height: 100vh;
  background: url(http://xyndigital.com/wp-content/uploads/2015/11/global-solace-1.jpg) no-repeat 0 0;
  background-size: cover;
}

@keyframes slide02-frames {
  0% {
    opacity: 0;
    transform: translate(0px, 0px) rotate(0deg);
  }
  20% {
    opacity: 0;
    transform: translate(0px, 0px) rotate(0deg);
  }
  25% {
    opacity: 1;
    transform: translate(0px, 0px) rotate(0deg);
  }
  40% {
    opacity: 1;
    transform: translate(0px, 0px) rotate(0deg);
  }
  45% {
    opacity: 0;
    transform: translate(0px, 0px) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(0px, 0px) rotate(0deg);
  }
}


/*---------------SLIDE03------------*/

.slide03-element {
  position: absolute;
  animation: slide03-frames ease-in-out 25s;
  animation-iteration-count: infinite;
  -webkit-animation: slide03-frames ease-in-out 25s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation: slide03-frames ease-in-out 25s;
  -moz-animation-iteration-count: infinite;
  -o-animation: slide03-frames ease-in-out 25s;
  -o-animation-iteration-count: infinite;
  -ms-animation: slide03-frames ease-in-out 25s;
  -ms-animation-iteration-count: infinite;
  width: 100%;
  height: 100vh;
  background: url(http://xyndigital.com/wp-content/uploads/2015/12/USSVenturer_00.jpg) no-repeat 0 0;
  background-size: cover;
}

@keyframes slide03-frames {
  0% {
    opacity: 0;
    transform: translate(0px, 0px) rotate(0deg);
  }
  40% {
    opacity: 0;
    transform: translate(0px, 0px) rotate(0deg);
  }
  45% {
    opacity: 1;
    transform: translate(0px, 0px) rotate(0deg);
  }
  60% {
    opacity: 1;
    transform: translate(0px, 0px) rotate(0deg);
  }
  65% {
    opacity: 0;
    transform: translate(0px, 0px) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(0px, 0px) rotate(0deg);
  }
}


/*---------------SLIDE04------------*/

.slide04-element {
  position: absolute;
  animation: slide04-frames ease-in-out 25s;
  animation-iteration-count: infinite;
  -webkit-animation: slide04-frames ease-in-out 25s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation: slide04-frames ease-in-out 25s;
  -moz-animation-iteration-count: infinite;
  -o-animation: slide04-frames ease-in-out 25s;
  -o-animation-iteration-count: infinite;
  -ms-animation: slide04-frames ease-in-out 25s;
  -ms-animation-iteration-count: infinite;
  width: 100%;
  height: 100vh;
  background: url(http://xyndigital.com/wp-content/uploads/2015/12/DarkAndLight.png) no-repeat 0 0;
  background-size: cover;
}

@keyframes slide04-frames {
  0% {
    opacity: 0;
    transform: translate(0px, 0px) rotate(0deg);
  }
  60% {
    opacity: 0;
    transform: translate(0px, 0px) rotate(0deg);
  }
  65% {
    opacity: 1;
    transform: translate(0px, 0px) rotate(0deg);
  }
  80% {
    opacity: 1;
    transform: translate(0px, 0px) rotate(0deg);
  }
  85% {
    opacity: 0;
    transform: translate(0px, 0px) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(0px, 0px) rotate(0deg);
  }
}


/*---------------SLIDE05------------*/

.slide05-element {
  position: absolute;
  animation: slide05-frames ease-in-out 25s;
  animation-iteration-count: infinite;
  -webkit-animation: slide05-frames ease-in-out 25s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation: slide05-frames ease-in-out 25s;
  -moz-animation-iteration-count: infinite;
  -o-animation: slide05-frames ease-in-out 25s;
  -o-animation-iteration-count: infinite;
  -ms-animation: slide05-frames ease-in-out 25s;
  -ms-animation-iteration-count: infinite;
  width: 100%;
  height: 100vh;
  background: url(http://xyndigital.com/wp-content/uploads/2015/12/City-Keys-Logo.png) no-repeat 0 0;
  background-size: cover;
}

@keyframes slide05-frames {
  0% {
    opacity: 1;
    transform: translate(0px, 0px) rotate(0deg);
  }
  5% {
    opacity: 0;
    transform: translate(0px, 0px) rotate(0deg);
  }
  80% {
    opacity: 0;
    transform: translate(0px, 0px) rotate(0deg);
  }
  85% {
    opacity: 1;
    transform: translate(0px, 0px) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: translate(0px, 0px) rotate(0deg);
  }
}