/* To fade between 3 images, use the following HTML:
<div class="fadein3x"> 
    <img id="f3" src="http://chaos.frolicbb.com/Hubble_ultra_deep_field_high_rez_edit1-4k.jpg">
    <img id="f2" src="http://i.imgur.com/D5yaJeW.png"> 
    <img id="f1" src="http://i.imgur.com/EUqZ1Er.png">
</div>
and the following CSS
 change keyframes 20/33/53 (3 images) or 25/50/75 (4 images) or 20/40/60/80 (5 images) etc
 to 33/66 for 2 images
    */

.fadein img {
    position:absolute; 
/*    position: center */
    top:0;
        display: block;
        margin-left: auto;
        margin-right: auto;
    height: 80%; /*or 70%, or what you want*/
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 16s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 16s;
}

@-webkit-keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}

#f1 {
    background-color: transparent;
}
#f2 {
    -webkit-animation-delay: -14s;
    background-color: transparent;
}
#f3 {
    -webkit-animation-delay: -12s;
    background-color: transparent;
}