Dernière modification : février 2023
Les démonstrations ci-dessous fonctionnent avec la nouvelle spécification.
Exemple 1 : apparition d'images au défilement
<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>
@keyframes scroll-anim {
to{
opacity: 1;
transform: unset
}
}
img {
max-width: 100%;
margin: 2rem 0;
opacity: 0;
view-timeline: scroll-image;
animation: scroll-anim both linear;
animation-timeline: scroll-image;
animation-delay-start: enter 25%;
animation-delay-end: enter 100%;
border: 10px solid #fff;
border-radius: .25em;
box-shadow: 1em 1em 2em .25em rgba(0,0,0,.2);
}
img:first-of-type{transform: translatex(-100%);}
img:nth-of-type(2){transform:scale(0)}
img:nth-of-type(3){transform: translatex(-100%) rotateZ(-5deg);}
Exemple 2 : défilement de l'indicateur de progression
<div id="progress">
</div>
/*nouvelle syntaxe*/@supports (animation-timeline: scroll()) {
#progress{
animation: anim-duration 1s linear;
animation-timeline: scroll();
position:fixed;
z-index:1;
left:0;
top:0;
width:100%;
height:4px;
transform-origin: 0 0;
background-color:#6753ea
}
@keyframes anim-duration {
from {transform:scaleX(0);
}
to {
transform: scaleX(1);
}
}
}