@keyframes fade {
  from { opacity: 0 }
  to   { opacity: 1 }
}

@keyframes combine {
  to { 
    filter: blur(10px) contrast(30); 
  }
}

h1 {
  animation: fade 4s linear infinite;
  animation-timing-function: linear(1 45%, 0 55% 90%, 1 100%);
  color: black;
}

h1:nth-child(2) {
  animation-timing-function: linear(0 45%, 1 55% 90%, 0 100%);
}

section {
  background: white; /* required */
  animation: combine 4s linear infinite;
  animation-timing-function: linear(0, 0 45%, 1 50%, 0 55% 90%, 1 95%, 0 100%);
  
  padding: 50px;
  display: grid;
  place-items: center;
  
  > * {
    grid-area: 1 / 1;
  }
}

/* For 3 items */
.items-3 h1, .items-3 {
  animation-duration: 6s;
}

.items-3 h1:nth-child(1) {
  animation-timing-function: linear(1 28.33%, 0 38.33%, 0 95%, 1 100%);
}

.items-3 h1:nth-child(2) {
  animation-timing-function: linear(0 28.33%, 1 38.33%, 1 61.66%, 0 71.66%, 0 100%);
}

.items-3 h1:nth-child(3) {
  animation-timing-function: linear(0 61.66%, 1 71.66%, 1 95%, 0 100%);
}

.items-3 {
  animation-timing-function: linear(0, 0 28.33%, 1 33.33%, 0 38.33%, 0 61.66%, 1 66.66%, 0 71.66%, 0 95%, 1 100%);
}

/* For 4 items */
.items-4 h1, .items-4 {
  animation-duration: 8s;
}

.items-4 h1:nth-child(1) {
  animation-timing-function: linear(1 20%, 0 30%, 0 95%, 1 100%);
}

.items-4 h1:nth-child(2) {
  animation-timing-function: linear(0 20%, 1 30%, 1 45%, 0 55%, 0 100%);
}

.items-4 h1:nth-child(3) {
  animation-timing-function: linear(0 45%, 1 55%, 1 70%, 0 80%, 0 100%);
}

.items-4 h1:nth-child(4) {
  animation-timing-function: linear(0 70%, 1 80%, 1 95%, 0 100%);
}

.items-4 {
  animation-timing-function: linear(0, 0 20%, 1 25%, 0 30%, 0 45%, 1 50%, 0 55%, 0 70%, 1 75%, 0 80%, 0 95%, 1 100%);
}

@layer demo {
  :root {
    view-transition-name: none;
  }
  
  h1 {
    font-size: 13vw;
  }
}

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

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

  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;

    display: grid;
    place-content: center;
    gap: 1rem;
    padding: 1rem;
  }
  
  fieldset {
    max-inline-size: max-content;
    display: flex;
    flex-wrap: wrap;
    gap: 1ch 2ch;
    border-color: #8885;
    
    > label {
      display: flex;
      gap: 1ch;
      align-items: center;
      white-space: nowrap;
    }
  }
}