CSS view-timeline-name Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* 1. Define the scrollable area */
.container {
  height: 400px;
  overflow-y: scroll;
  border: 2px solid #ccc;
  padding: 20px;
}

.spacer {
  height: 800px;
  background: linear-gradient(to bottom, #f9f9f9, #eee);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 2. The target element */
.animating-box {
  width: 150px;
  height: 150px;
  margin: 50px auto;
  background-color: #3498db;
  color: white;
  display: flex;
  align-items: center;
  text-align: center;
  font-weight: bold;

  /* Create the timeline name */
  view-timeline-name: --box-visibility;
  view-timeline-axis: block;

  /* Attach the animation to the named timeline */
  animation-name: rotateIn;
  animation-fill-mode: both;
  animation-timeline: --box-visibility;
}

/* 3. The animation keyframes */
@keyframes rotateIn {
  from {
    opacity: 0;
    transform: scale(0.5) rotate(-180deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}</style></head><body><div class="container">
  <div class="spacer">Scroll down to see the effect...</div>
  
  <div class="animating-box">I rotate as I scroll</div>
  
  <div class="spacer">Keep scrolling...</div>
</div></body></html>