<header>
  <h1>Scroll the page!</h1>
</header>

/* time base animation must only specify from */
@keyframes enter {
  from {
    scale: 0.01;
  }
}

@keyframes spin {
  to {
    scale: 0.01;
  }
}

h1 {
  /* SDA animation listed first for a lesser composite order than the time based animation */
  animation: spin linear both, enter 5s ease;
  animation-timeline: scroll(), auto;
/*   animation-composition: add; */
  animation-range: 0vh 20vh;
}

@layer support {
  * {
    box-sizing: border-box;
    margin: 0;
  }

  html {
    block-size: 100%;
    color-scheme: dark light;
  }

  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;
    display: grid;
    place-content: start center;
    
    min-block-size: 300vh;
  }
  
  header {
    display: grid;
    padding: 25vmin 5vmin 0;
  }
}