javascript - 如何使用css无限期翻转两个表情符号

Question

我有一个带有两个表情符号的文本，
我想使用 css 将一个表情符号与另一个表情符号翻转。

当显示第一个表情符号时，我想隐藏第二个表情符号。所以他们有点无限期地互相取代。

我在这里找到了一个很好的例子，如何让文本闪烁

    .blink {
      animation: blinker 1s step-start infinite;
    }
    
    @keyframes blinker {
      50% {
        opacity: 0;
      }
    }

    
    <div class="blink"></div>

那么，当第一个表情被隐藏时，你将如何显示第二个表情呢？

Answer 1

.emoji-cont {
  position: relative;
}

.blink, .blink-2 {
    position: absolute;
}

.blink {
  animation: blinker 1s infinite;
}

.blink-2 {
  animation: blinker 1s .5s infinite;
}

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

<div class="emoji-cont">
  <div class="blink"></div>
  <div class="blink-2"></div>
</div>

Answer 2

您可以使用伪元素：

.blink::before {
  content: "";
  animation: blinker 1s linear infinite alternate;
}

@keyframes blinker {
  0% {
    content: "";
  }
  50% {
    opacity: 0%;
  }
  100% {
    content: "";
  }
}

<div class="blink"></div>