<div class="page">
<div class="arrow">Scroll ⬇️ Down</div>
<div class="img"></div>
</div>
.page {
height: 400dvh;
display: grid;
place-items: center;
}
.img {
background-image: url("https://images.unsplash.com/photo-1701735168006-1c7cbb9caff9?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDM2MDg1MjR8&ixlib=rb-4.0.3&q=85");
width: 300px;
height: 200px;
background-size: 300px;
background-repeat: no-repeat;
background-position: center;
animation-range: cover 0% cover 100%;
animation: the-animation linear;
animation-timeline: view();
animation-iteration-count: 1;
}
@keyframes the-animation {
to {
background-size: 500px;
}
}
This Pen doesn't use any external CSS resources.