Fade in Banner on page loading

[DanCarroll]

Hi all,

I'm developing my online store right now and was hoping to have my hero banner fade in after a second or two when first arriving on the homepage. Does anyone know if this is possible? For context:

So I would essentially want the site to show as whitespace for a second before the image fades in. I am using the Debut theme currently and the hero banner is currently an Image with text overlay. Any help would be greatly appreciated.

[PaulNewton]

Roughly add the following as a style to the theme files or as a custom html/block if applicable.

#shopify-section-hero , . fade-in {
  animation: fade-in 5s;
}
@keyframes fade-in {
  0% {opacity:0;}
  100% {opacity:1;}
}

Or to have it hidden until javascript loads make an onload handler and apply a fade-in class to the #shopify-section-hero element .

Milage may vary greatly when using slideshows, most slider libs have a transition option/function.