I grabbed the code from here and altered it for my slideshow. In my slideshow it fades each image in and out completely.
My problem is only that in the beginning all the PNG images are stacked on top of each other. I have a pattern back drop on the original project. And I have to only use HTML and CSS3 as such like is already here. I'm creating a slideshow for Confluence and I am restricted to do it all in a "body" tag.
Any insights appreciated.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><!--
For "n" images You must define:
a=presentation time for one image
b=duration for cross fading
Total animation-duration is of course t=(a+b)*n
animation-delay = t/n or = a+b
Percentage for keyframes:
0%
a/t*100%
(a+b)/t*100% = 1/n*100%
100%-(b/t*100%)
100%
--><body><style>
@-webkit-keyframes slideshowFadeInOut {
0% {
opacity: 1;
}
10.4% {
opacity: 1;
}
12.5% {
opacity: 0;
}
98% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes slideshowFadeInOut {
0% {
opacity: 1;
}
10.4% {
opacity: 1;
}
12.5% {
opacity: 0;
}
98% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes slideshowFadeInOut {
0% {
opacity: 1;
}
10.4% {
opacity: 1;
}
12.5% {
opacity: 0;
}
98% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes slideshowFadeInOut {
0% {
opacity: 1;
}
10.4% {
opacity: 1;
}
12.5% {
opacity: 0;
}
98% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#overview-slideshow {
position: relative;
height: 300px;
width: 300px;
}
#overview-slideshow img {
position: absolute;
left: 0;
}
#overview-slideshow img {
--duration: 24s;
-webkit-animation-name: slideshowFadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: var(--duration);
-moz-animation-name: slideshowFadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: var(--duration);
-o-animation-name: slideshowFadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: var(--duration);
animation-name: slideshowFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: var(--duration);
}
#overview-slideshow img:nth-of-type(1) {
--delay: 21s;
-webkit-animation-delay: var(--delay);
-moz-animation-delay: var(--delay);
-o-animation-delay: var(--delay);
animation-delay: var(--delay);
}
#overview-slideshow img:nth-of-type(2) {
--delay: 18s;
-webkit-animation-delay: var(--delay);
-moz-animation-delay: var(--delay);
-o-animation-delay: var(--delay);
animation-delay: var(--delay);
}
#overview-slideshow img:nth-of-type(3) {
--delay: 15s;
-webkit-animation-delay: var(--delay);
-moz-animation-delay: var(--delay);
-o-animation-delay: var(--delay);
animation-delay: var(--delay);
}
#overview-slideshow img:nth-of-type(4) {
--delay: 12s;
-webkit-animation-delay: var(--delay);
-moz-animation-delay: var(--delay);
-o-animation-delay: var(--delay);
animation-delay: var(--delay);
}
#overview-slideshow img:nth-of-type(5) {
--delay: 9s;
-webkit-animation-delay: var(--delay);
-moz-animation-delay: var(--delay);
-o-animation-delay: var(--delay);
animation-delay: var(--delay);
}
#overview-slideshow img:nth-of-type(6) {
--delay: 6s;
-webkit-animation-delay: var(--delay);
-moz-animation-delay: var(--delay);
-o-animation-delay: var(--delay);
animation-delay: var(--delay);
}
#overview-slideshow img:nth-of-type(7) {
--delay: 3s;
-webkit-animation-delay: var(--delay);
-moz-animation-delay: var(--delay);
-o-animation-delay: var(--delay);
animation-delay: var(--delay);
}
#overview-slideshow img:nth-of-type(8) {
--delay: 0s;
-webkit-animation-delay: var(--delay);
-moz-animation-delay: var(--delay);
-o-animation-delay: var(--delay);
animation-delay: var(--delay);
}
</style><div id="overview-slideshow" class="shadow"><img src="blank.png"><img src="Iso.png"><img src="blank.png"><img src="Top.png"><img src="blank.png"><img src="Front.png"><img src="blank.png"><img src="Side.png"></div></body></html>