Use this HTML to configure a set of crossfading images for your ArcGIS Online home page. Update image paths (starting at line 148) and other animation properties as desired. Go to My Organization > Edit Settings > Home Page > Banner > Custom Design > click View HTML Source button in the text editing toolbar > paste your modified code into the te…

CrossfadingImagesHomePage.html

<style>
#cf {
    position:relative; 
    margin:0 auto;
}

#cf img {
    position:absolute;
    left:0;
}

 #cf img {
    -webkit-animation-name: cfFadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 36s;

    -moz-animation-name: cfFadeInOut;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 36s;

    -o-animation-name: cfFadeInOut;
    -o-animation-timing-function: ease-in-out;
    -o-animation-iteration-count: infinite;
    -o-animation-duration: 36s;

    animation-name: cfFadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 36s;
}

#cf img:nth-of-type(1) {
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    animation-delay: 30s;
}

#cf img:nth-of-type(2) {
    animation-delay: 24s;
    -moz-animation-delay: 24s;
    -webkit-animation-delay: 24s;
    -o-animation-delay: 24s;
    
}

#cf img:nth-of-type(3) {
    animation-delay: 18s;
    -moz-animation-delay: 18s;
    -webkit-animation-delay: 18s;
    -o-animation-delay: 18s; 
}

#cf img:nth-of-type(4) {
    animation-delay: 12s;
    -moz-animation-delay: 12s;
    -webkit-animation-delay: 12s;
    -o-animation-delay: 12s;
}

#cf img:nth-of-type(5) {
    animation-delay: 6s;
    -moz-animation-delay: 6s;
    -webkit-animation-delay: 6s;
    -o-animation-delay: 6s;
}

#cf img:nth-of-type(6) {
    animation-delay: 0s; 
    -moz-animation-delay: 0s;
    -webkit-animation-delay: 0s;
    -o-animation-delay: 0s;
}

@-webkit-keyframes cfFadeInOut {
    0% {
        opacity:1;
    }
    17% {
        opacity:1;
    }
    25% {
        opacity:0;
    }
    92% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
    
@-moz-keyframes cfFadeInOut {
    0% {
        opacity:1;
    }
    17% {
        opacity:1;
    }
    25% {
        opacity:0;
    }
    92% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
@-o-keyframes cfFadeInOut {
    0% {
        opacity:1;
    }
    17% {
        opacity:1;
    }
    25% {
        opacity:0;
    }
    92% {
        opacity:0;
    }
    100%{
        opacity:1;
    }
}
@keyframes cfFadeInOut {
    0% {
        opacity:1;
    }
    17% {
        opacity:1;
    }
    25% {
        opacity:0;
    }
    92% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
</style>
<div id="cf" style=" -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -o-border-radius:0 0 10px 10px; border-radius:0 0 10px 10px">
    <img class="img1" src="http://s3.amazonaws.com/AGOL_TranportationPractice_Config/06_esritp_banner.jpg" style="width: 960px; font-family: futura; height: 470px; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -o-border-radius:0 0 10px 10px; border-radius:0 0 10px 10px"/>
    <img class="img2" src="http://s3.amazonaws.com/AGOL_TranportationPractice_Config/05_esritp_banner.jpg" style="width: 960px; font-family: futura; height: 470px; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -o-border-radius:0 0 10px 10px; border-radius:0 0 10px 10px" />
    <img class="img3" src="http://s3.amazonaws.com/AGOL_TranportationPractice_Config/04_esritp_banner.jpg" style="width: 960px; font-family: futura; height: 470px; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -o-border-radius:0 0 10px 10px; border-radius:0 0 10px 10px" />
    <img class="img4" src="http://s3.amazonaws.com/AGOL_TranportationPractice_Config/03_esritp_banner.jpg" style="width: 960px; font-family: futura; height: 470px; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -o-border-radius:0 0 10px 10px; border-radius:0 0 10px 10px"/>
    <img class="img5" src="http://s3.amazonaws.com/AGOL_TranportationPractice_Config/02_esritp_banner.jpg" style="width: 960px; font-family: futura; height: 470px; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -o-border-radius:0 0 10px 10px; border-radius:0 0 10px 10px" />
    <img class="img6" src="http://s3.amazonaws.com/AGOL_TranportationPractice_Config/01_esritp_banner.jpg" style="width: 960px; font-family: futura; height: 470px; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -o-border-radius:0 0 10px 10px; border-radius:0 0 10px 10px" />
</div>
<style>
.galleryNode .galleryLabelContainer {font-weight: bold; background-color: rgba(167, 167, 167, 0.80); background-size:212px 60px; padding-top:5px; padding-bottom:5px; padding-right: 5px; padding-left: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color: #fff !important;text-shadow: #000 0 1px 1px, #000 1px 1px 1px;} filter: progid:DXImageTransform.Microsoft.Glow(color=000000,strength=2);
    </style><style>
#header .dropdown-navigation, #items .dropdown-navigation, #header_map_signin .dropdown-navigation .nav a .esri #header-controls ul li a, #header_map_newMap.map_nav a.map_nav_link{color: #fff; text-decoration: none;}
    </style><style>
#header .nav a:hover {color: #000; text-decoration: none;}
    </style><style>
.esriItemLinks{ background-color: rgba(167, 167, 167, 0.30); background-size:80px 60px; padding-top:5px; padding-bottom:10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;} a, .esriItemLinks a:link, .esriItemLinks a:hover, .esriItemLinks a:active, .esriItemLinks a:visited .dropdown-navigation, #items .dropdown-navigation, #header_map_signin .dropdown-navigation 
        {color: #fff !important;text-shadow: #000 0 1px 1px, #000 1px 1px 2px;}  filter: progid:DXImageTransform.Microsoft.Glow(color=000000,strength=2);
</style>