title: text fade in-out with multiple blocks of text using css only
body: <p>I have 3 blocks of text. I want block 1 to fade in and show for 3 seconds and then to fade out. As soon as its opacity reaches 0, I want text block 2 to fade in and be visible for 3 seconds... same with text block 3. I thought I could achieve this by assigning the am animation to all 3 and different <code>animation-delay</code> for each, but they all seem to eventually display in unison:</p>
  <pre><code>&lt;main&gt;
    &lt;h2&gt;Text block 1&lt;/h2&gt;
    &lt;h2&gt;Text block 2&lt;/h2&gt;
    &lt;h2&gt;Text block 3&lt;/h2&gt;
  &lt;/main&gt;
  
  
  
  @keyframes textFader {
    0% {
      opacity: 0;
    }
    25% {
      opacity: 1;
    }
    75% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  
  h2 {
      animation-name: textFader;
      animation-duration: 12s;   
      animation-timing-function: ease-in-out;        
      animation-iteration-count: infinite;
  }
  
  h2:first-of-type {
      animation-delay: 0s;
  }
  h2:nth-of-type(2) {
      animation-delay: 6s;
  }
  h2:last-of-type {
      animation-delay: 12s;
  }
  </code></pre>
  <p>I know it can be done with 3 separate animations:</p>
  <pre><code>   @keyframes textFader1 {
    0% {
      color: rgba(255, 255, 255, 0);
    }
    8% {
      color: rgba(255, 255, 255, 1);
    }
    25% {
      color: rgba(255, 255, 255, 1);
    }
    33% {
      color: rgba(255, 255, 255, 0);
    }
    100% {
      color: rgba(255, 255, 255, 0);
    }
  }
  
  @keyframes textFader2 {
    0% {
      color: rgba(255, 255, 255, 0);
    }
    34% {
      color: rgba(255, 255, 255, 0);
    }
    42% {
      color: rgba(255, 255, 255, 1);
    }
    59% {
      color: rgba(255, 255, 255, 1);
    }
    67% {
      color: rgba(255, 255, 255, 0);
    }
    100% {
      color: rgba(255, 255, 255, 0);
    }
  }
  
  @keyframes textFader3 {
      0% {
        color: rgba(255, 255, 255, 0);
      }
      66% {
        color: rgba(255, 255, 255, 0);
      }
      83% {
        color: rgba(255, 255, 255, 1);
      }
      91% {
        color: rgba(255, 255, 255, 1);
      }
      100% {
        color: rgba(255, 255, 255, 0);
      }
    }
  </code></pre>
  <p>But this it's kind of a management/editing nightmare for 1, much less 3 (especially with more complex keyframes) - there's gotta be a better way?</p>
  <p>I know this can be done quite-easily with JavaScript, but I need a CSS-only solution. Can anyone see what I'm doing wrong?</p>