Result
css
#CrossFade {
background: #fff;
display: flex;
align-items: flex-end;
height: 100vh;
overflow: hidden;
position: relative;
}
#CrossFade img {
position: absolute;
min-width: 100%;
min-height: 100%;
height: auto;
background: #000;
backface-visibility: hidden;
opacity: 0;
transform: scale(1.4);
animation: CrossFade 24s infinite;
}
#CrossFade img:nth-child(3) {
animation-delay: 6s;
}
#CrossFade img:nth-child(2) {
animation-delay: 12s;
}
#CrossFade img:nth-child(1) {
animation-delay: 18s;
}
@keyframes CrossFade {
25% {
opacity: 1;
transform: scale(1) rotate(0);
}
40% {
opacity: 0;
}
}
|
html
<div id="CrossFade"><img src="//unsplash.it/2500/1500" alt="img"/><img src="//unsplash.it/2505/1500" alt="img"/><img src="//unsplash.it/2510/1500" alt="img"/><img src="//unsplash.it/2515/1500" alt="img"/>
<div class="intro">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis impedit facilis nesciunt quam vitae voluptatibus ullam vero.</p>
</div>
</div>
|
via
Ken Burns effect CSS only
