CSS Scroll-driven animations images

• animation-timeline
• view-timeline
• animation-range
• @keyframes

Votre navigateur ne supporte pas cette démonstration

Si la démonstration ne fonctionne pas, activez la fonctionnalité : #enable-experimental-web-platform-features via le drapeau chrome://flags.

<main>

<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>

<img src="image.jpg" alt loading="lazy" decoding="async">
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>

<img src="image.jpg" alt loading="lazy" decoding="async">
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>

<img src="image.jpg" alt loading="lazy" decoding="async">
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>

</main>

img {
	

margin:2rem 0;
opacity:0;	
view-timeline: --image block;
animation:auto scroll-anim both;
animation-timeline: --image;
border: 10px solid #fff;
border-radius: .25em;
box-shadow: 1em 1em 2em .25em rgba(0,0,0,.2);
animation-range: entry 25% cover 50%;
}
	
img:first-of-type{transform: translatex(-100%);}	
img:nth-of-type(2){transform:scale(0)}	
img:nth-of-type(3){transform: translatex(-100%) rotate(1turn);}
	
	
		
	
	
@keyframes scroll-anim {

to{
	
opacity: 1;
transform: unset
	
	}
	
}