Multiple image cross fading in CSS - without (java) script
This can easily be done with CSS3 if you know how many images you have.
jsFiddle: http://jsfiddle.net/hajmd/
#crossfade > img {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 30s linear infinite 0s;
-moz-animation: imageAnimation 30s linear infinite 0s;
-o-animation: imageAnimation 30s linear infinite 0s;
-ms-animation: imageAnimation 30s linear infinite 0s;
animation: imageAnimation 30s linear infinite 0s;
}
The "30s" at "-webkit-animation: imageAnimation 30s linear infinite 0s;" tells that the animation for each image will last 30 seconds in infinete number of times.
#crossfade > img:nth-child(2) {
background-image: url(../images/2.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
#crossfade > img:nth-child(3) {
background-image: url(../images/3.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
#crossfade > img:nth-child(4) {
background-image: url(../images/4.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
#crossfade > img:nth-child(5) {
background-image: url(../images/5.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
@-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
CSS - Cross fading with multiple images on a webpage
the @keyframe rule works inside the animation property;
and you're not defining the animation property anywhere,
so to begin addanimation: cf4FadeInOut 8s;
to #index_banner img
selector.
Cross-Fade between images with CSS in loop
I have taken your fiddle as a base, and made it work without script.
updated demo
I needed to set an id to the HTML
.fadein img {
position:absolute;
top:0;
-webkit-animation-name: fade;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 6s;
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 6s;
}
@-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: lightblue;
}
#f2 {
-webkit-animation-delay: -4s;
background-color: yellow;
}
#f3 {
-webkit-animation-delay: -2s;
background-color: lightgreen;
}
<div class="fadein">
<img id="f3" src="http://i.imgur.com/R7A9JXc.png">
<img id="f2" src="http://i.imgur.com/D5yaJeW.png">
<img id="f1" src="http://i.imgur.com/EUqZ1Er.png">
</div>
How to do a multiple image crossfading
best is to set the opacity around 50% , here an example with also an increased duration :
@keyframes cf4FadeInOut {
40%,
60% {
opacity: 0;
}
}
.App {
display: grid;
width: max-content;
margin: auto;
}
.App img {
grid-row: 1;
grid-column: 1;
animation-name: cf4FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 20s;
}
.App img:nth-of-type(1) {
animation-delay: -15s;
}
.App img:nth-of-type(2) {
animation-delay: -10s;
}
.App img:nth-of-type(3) {
animation-delay: -5s;
}
.App img:nth-of-type(4) {
animation-delay: 0s;
}
<div class="App">
<img src="https://picsum.photos/id/1011/300/200" class="image4">
<img src="https://picsum.photos/id/1016/300/200" class="image3">
<img src="https://picsum.photos/id/1019/300/200" class="image2">
<img src="https://picsum.photos/id/1018/300/200" class="image1">
</div>
CSS Multiple Image Crossfade
try using css animations:
http://www.w3schools.com/css3/css3_animations.asp
Note:
This will not work with non css3 browsers.
Related Topics
How to Overwrite Angular 2 Material Styles
Bootstrap 3 Slide in Menu/Navbar on Mobile
Font Weight Turns Lighter on MAC/Safari
Css3 ::Selection Behaves Differently in Ff & Chrome
Bootstrap 4 Navbar and Content Fill Height Flexbox
Less CSS: Abusing the & Operator When Nesting
Is @Page { Size:Landscape} Obsolete
How to Remove Extra Margin Space Generated by Inline Blocks
Remove Safari/Chrome Textinput/Textarea Glow
Force Non-Monospace Font into Fixed Width Using CSS
How to Make Firefox Print a Background-Color Style