CSS
.image-container {
position: relative;
}
.image-container img {
position: absolute;
animation-name: multiple-image-crossfade;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 14s;
}
.image-container img:nth-of-type(1) {
animation-delay: 7s;
}
.image-container img:nth-of-type(2) {
animation-delay: 0s;
}
@keyframes multiple-image-crossfade {
0% {
opacity:1;
}
36% {
opacity:1;
}
50% {
opacity:0;
}
86% {
opacity:0;
}
100% {
opacity:1;
}
}
SCSS
.image-container {
position: relative;
img {
position: absolute;
animation-name: multiple-image-crossfade;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 14s;
&:nth-of-type(1) {
animation-delay: 7s;
}
&:nth-of-type(2) {
animation-delay: 0s;
}
}
}
@keyframes multiple-image-crossfade {
0% {
opacity:1;
}
36% {
opacity:1;
}
50% {
opacity:0;
}
86% {
opacity:0;
}
100% {
opacity:1;
}
}