<div class="container">
  <div>
    <div class="game">
      <div class="mario"></div>
      <div class="coin"></div>
    </div>
  </div>
</div>
.container {
  max-width: 400px;
  height: 250px;
  margin: auto;
  border: 5px solid;
  overflow: auto;
  scrollbar-width: none;
}
.container > div {
  width: 200%;
  height: 200%;
}

.game {
  max-width: 300px;
  height: 200px;
  position: sticky;
  top: 10px;
  left: 40px;
  border: 5px solid;
  background: #6185f8;
}
.mario {
  width: 60px;
  aspect-ratio: 1;
  position: relative;
  top: 0%;
  left: 0%;
  z-index: 1;
  background: url(https://assets.codepen.io/1480814/mm.png) center/cover;
  animation: x linear,y linear;
  animation-timeline: scroll(nearest inline),scroll(nearest block);
}
@keyframes x{to {left: calc(100% - 60px)}}
@keyframes y{to {top: calc(100% - 60px)}}


.coin {
  position: absolute;
  inset: 0;
  animation: c-x linear,c-y linear;
  animation-timeline: scroll(nearest inline),scroll(nearest block);
  container-name: c;
}
@keyframes c-x {
  0% ,44%  {--c-x: 0}
  45%,55%  {--c-x: 1}
  56%,100% {--c-x: 0}
}
@keyframes c-y {
  0% ,44%  {--c-y: 0}
  45%,55%  {--c-y: 1}
  56%,100% {--c-y: 0}
}
.coin:before {
  content: "";
  position: absolute;
  width: 50px;
  left: calc(50% - 25px);
  top: calc(50% - 25px);
  aspect-ratio: 1;
  background: url(https://assets.codepen.io/1480814/ccc.png) 0 50%/600% auto no-repeat;
}
@container c style(--c-x: 1) and style(--c-y: 1) {
  .coin:before {
    background-color: red;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.