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

Question

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

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

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

.blink {
animation: blinker 1s step-start infinite;
}

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

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

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

Answer 1

您可以使用伪元素：

.blink::before {
content: "  ";
animation: blinker 1s linear infinite alternate;
}
@keyframes blinker {
0% {
content: "  ";
}
50% {
opacity: 0%;
}
100% {
content: "  ";
}
}

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

Answer 2

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

您可以设置伪元素display: inline-block，以打开更多动画选项。

在这里，我们使用transform: scaleX()来创建翻转效果，就好像表情符号有不同的侧面(正面和背面)。

如果你正在寻找一种不同的方式在两个表情符号之间转换，这很有用；而不是简单的渐变。

.blink::before {
content: "  ";
display: inline-block;
animation: blinker 1s linear infinite alternate;
}
@keyframes blinker {
0% {
content: "  ";
transform: scaleX(1);
}
50% {
transform: scaleX(0);
}
100% {
content: "  ";
transform: scaleX(1);
}
}

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