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).

I tried adapting the answers from here and here. But, this is not quite right, because the words are overlapping a lot of the time.

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.mask{
position:absolute;
-webkit-animation: blinker 140ms infinite;
}

.target{
position:absolute;
-webkit-animation: blinker 240ms infinite;
}

<p >MASK</p><p >TARGET</p>

Using animation-delay does not work, because it applies the delay to the first presentation, not subsequent iterations. I read this page here but I'm finding it difficult to adapt to two words.

Also, I do not want there to be any delay for the first presentation. The first word has to be visible from the start.

CodePudding user response：

There's several other approaches to accomplish the goal. If you don't mind using pseudo elements then perhaps here's an option. I can add more later if you don't want pseudo elements.

.special-blinky {
  position: relative;
  font-size: 3rem;
  margin: 3rem;
}

.special-blinky:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: 'MASK';
  animation: blinky-special 1s linear infinite;
}


@keyframes blinky-special {
  50% { content: 'TARGET'}
}

<div ></div>

CodePudding user response：

Here is an idea using CSS grid and order animation. All you have to do is to adjust the percentage of the keyframes and the duration

.blinky {
  display: grid;
  grid-template-rows: 1fr 0; /* 2 rows with the second having 0 height  */
  overflow: hidden; /* hide the overflow of the second row*/
  font-size: 3rem;
}
/* apply the animation to only the last element */
.blinky > span:last-child {
  animation: blink 2s linear infinite;
}
@keyframes blink {
  0%,
  69%  {order:0}
  70%,
  100% {order:-1}
}

<div >
  <span>MASK</span>
  <span>TARGET</span>
</div>