title: Flash two texts of different durations indefinitely using CSS
body: <p>I would like to continuously flash between two different words using CSS. When the first one is visible, the second should not be and vice versa. They should not be visible at the same time (so no fade in/out).</p>
  <p>I tried adapting the answers from <a href="https://stackoverflow.com/questions/16344354/how-to-make-blinking-flashing-text-with-css-3">here</a> and <a href="https://stackoverflow.com/questions/67542758/how-to-flip-two-emojis-indefinitely-using-css">here</a>. But, this is not quite right, because the words are overlapping a lot of the time.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@keyframes blinker {
    50% {
      opacity: 0;
    }
  }
  
  .mask{
  position:absolute;
  -webkit-animation: blinker 140ms infinite;
  }
  
  .target{
  position:absolute;
  -webkit-animation: blinker 240ms infinite;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p class="mask"&gt;MASK&lt;/p&gt;&lt;p class="target"&gt;TARGET&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Using animation-delay does not work, because it applies the delay to the first presentation, not subsequent iterations. I read <a href="https://css-tricks.com/css-keyframe-animation-delay-iterations/" rel="nofollow noreferrer">this page</a> here but I'm finding it difficult to adapt to two words.</p>
  <p>Also, I do not want there to be any delay for the first presentation. The first word <em>has</em> to be visible from the start.</p>