Do you think this idea will work out well?
A fade-in effect is commonly used not just for its gentle and 'organic' appearance in the display but also because it gives the browser some time to fully load the image, preventing the unattractive 'cascading' effect of a loading image from being experienced by the user. This would especially be applicable for high-resolution images utilized as backgrounds, like in the example provided.
If you (or your client) still wish to pursue this, here's a method to achieve it.
You will need to define a customized animation specifically optimized for the first image. It could look something like:
@-webkit-keyframes initialImageAnimation {
0% { opacity: 1; }
17% { opacity: 1; }
25% { opacity: 0; }
100% { opacity: 0; } } /* make sure to include all other vendor prefixes */
Then apply it to the .jpg that you want to appear initially:
.cb-slideshow li:nth-child(1) span {
background-image:url(path-to-first-image);
-webkit-animation: initialImageAnimation 36s linear infinite 0s;
-moz-animation: initialImageAnimation 36s linear infinite 0s;
-ms-animation: initialImageAnimation 36s linear infinite 0s;
-o-animation: initialImageAnimation 36s linear infinite 0s;
animation: initialImageAnimation 36s linear infinite 0s;
}
(This will replace the original animation allocated to every other background image).
In this way, the first image will quickly appear right after the page loads. However, it may disrupt the slideshow later on as the first image suddenly appears right after the final image fades out.
A simple fix is to assign the same image as both first and last in the slideshow, with the latter reverting back to the default animation of any other image except the first one.
Therefore, it would essentially look like this:
.cb-slideshow li:nth-child(6) span {
background-image: url(path-to-first-image);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-ms-animation-delay: 30s;
-o-animation-delay: 30s;
animation-delay: 30s;
}
This will result in a seamless transition from the last image to the first image in the sequence.