Animation-timeline view() – plages multiples
HTML
index.html <div class="container">
<img src="https://fastly.picsum.photos/id/149/300/300.jpg?hmac=Iv6YhJJCEiBF3jekK2MnQNCrk6Ey_zSzEIGPFAjpD30" alt="image" class="projects__img">
<img src="https://fastly.picsum.photos/id/472/300/300.jpg?hmac=a3XXSq9tQnozNx-l8rmPt0Y-orMbCaE2t8lMdPeyl8I" alt="image" class="projects__img">
<img src="https://fastly.picsum.photos/id/407/300/300.jpg?hmac=3-bYZa-106MZ2p2CC-t_qbcEu8PqGIFR3eHaMyQBFU8" alt="image" class="projects__img">
<img src="https://fastly.picsum.photos/id/190/300/300.jpg?hmac=SB4w-fGSwcAmNOOknpFb9vnYvqR3xjFyGL4ftK-NEX8" alt="image" class="projects__img">
<img src="https://fastly.picsum.photos/id/35/300/300.jpg?hmac=rMMbUKwEGr_LUSBExmyYWLqK7-RGUNnbO8Y3htN5LFo" alt="image" class="projects__img">
<img src="https://fastly.picsum.photos/id/140/300/300.jpg?hmac=bgxfOFd9uSQh8cX4cR_N8mhW7fjMEYPLNtRNJ5gG-tI" alt="image" class="projects__img">
</div>
CSS
style.css @layer demo {
@keyframes animate-in-and-out {
entry 0% {
opacity: 0;
transform: translateY(200%) scale(0);
filter: blur(35px) grayscale(0.5);
}
entry 100% {
opacity: 1;
filter: blur(0px) grayscale(0);
transform: translateY(0) scale(1);
}
exit 0% {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0) grayscale(0);
}
exit 100% {
opacity: 0;
transform: translateY(-200%) scale(0);
filter: blur(35px) grayscale(0.5);
}
}
.projects__img {
animation: ease-in-out animate-in-and-out forwards;
animation-timeline: view();
}
}
@layer demoStyles {
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
color: white;
}
.container {
perspective: 1000;
position: relative;
--size: 50vh;
--gap: clamp(1rem, 4vw, 2rem);
width: 50vw;
margin-inline: auto;
display: flex;
flex-direction: column;
gap: var(--gap);
height: calc(var(--size) * 2 + 2 * var(--gap));
overflow: hidden auto;
padding: calc(var(--size) / 2) 1rem;
align-items: center;
background-image: linear-gradient(
0deg,
transparent,
#000 35%,
#000 65%,
transparent 100%
);
mask: linear-gradient(
0deg,
transparent,
#f00 35%,
#f00 65%,
transparent 100%
);
img {
height: var(--size);
width: var(--size);
}
border-left: 1px solid white;
border-right: 1px solid white;
}
}