ht: 100px;
  margin: 1em;
  outline: 1px solid;
}
.pseudo::before {
  content: "";
  display: inline;
  width: 100px;
  height: 50px;
  background: red;
  animation: bg linear;
  animation-timeline: view(inline);
}

.content {
  width: 100px;
  height: 100px;
  background: green;
}

@keyframes bg {
  from {
    background: rgb(0, 255, 0);
  }
  to {
    background: rgb(0, 0, 255);
  }
}
</style>
<body>
  <div class="scroller pseudo">
    <div class="content"></div>
  </div>
  <div id="log"></div>
</body>
<s