firered-item-scroll-part2.css

.bag {
	/* hoist the item list scroll progress scope to the parent so can be shared */
	timeline-scope: --item-list-scroll-timeline;
}

.item-list {
	/* make the item lists y-axis scroll progress available as a variable */
	scroll-timeline: --item-list-scroll-timeline y;
}

.bag-section-image {
	/* The animation(s) to drive using the scroll progress */
	animation: item-bag-image linear;
	/* Hook up the item lists scroll progress to drive the animation */
	animation-timeline: --item-list-scroll-timeline;
}

@keyframes item-bag-image {
	/* control the changing of the image based on scroll progress */
	0% {
		background-image: url('img/items.png');
	}
	46% {
		background-image: url('img/pokeballs.png');
	}
	53% {
		background-image: url('img/key-items.png');
	}
}