/* PERCENTAGES
You need to break up 100% into the number of seconds of the animation. eg If the animation is 10 seconds long then each second is 10% eg If the animation is 6 seconds then each second is 16.66%. The timing then becomes a multiple of that. Math: 100 ÷ animation duration = percentage for 1 second. */

/* DURATION and DELAY
To add or delete images, make sure the length of animation equals that of the sum of images required. eg Here, the FIVE images are 0s, 3s, 6s, 9s and 12s (Image transitions being 3 seconds each) so the TOTAL needs to be the 12s plus an extra 3s, making the animation a total of 15s*/

/* OTHER
Give the animation a unique name (animation-name: ?????;) - In case there is a different animation on the page*/
* {
  padding: 0;
  margin: 0
}
@keyframes fade05 {
  0%   { opacity: 0; }
  8.33%   { opacity: 1; }
  24.99%  { opacity: 1; }
  33.32%  { opacity: 0; }
  100% { opacity: 0; }
}
.animation05  img{ 
    opacity:0; 
    animation-name: fade05; 
    animation-duration: 15s; 
    animation-iteration-count: infinite; 
    position:absolute; 
    left:0; 
    right:0; 
}
.animation05 img:nth-child(1) { animation-delay: 0s; }
.animation05 img:nth-child(2) { animation-delay: 3s; }
.animation05 img:nth-child(3) { animation-delay: 6s; }
.animation05 img:nth-child(4) { animation-delay: 9s; }
.animation05 img:nth-child(5) { animation-delay: 12s; }