How to flip two emojis indefinitely using css

Question

I have a text with two emojis
I want to flip one emogi with another using css.

When the first emogi is shown I want to the second emoji to be hidden. So they kinda indefinitely replacing each other.

I found here a great example how to make text blink

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

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

So how would you show the second emogi while the first one is hidden?

iz_ · Accepted Answer · 2021-05-15T04:22:34.820

4

You can use a pseudo-element:

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

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

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

edited May 15 '21 at 04:22

answered May 15 '21 at 02:51

iz_

15,923
3
25
40

is there anyway to add a simple transition in between ? – Sergino May 15 '21 at 04:17

score 2 · Answer 2 · answered May 15 '21 at 02:50

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>

answered May 15 '21 at 02:50

Sameer

4,758
3
20
41

is there anyway to add a simple transition in between ? – Sergino May 15 '21 at 04:17

score 0 · Answer 3 · answered May 03 '23 at 18:39

You can set the pseudo-element display: inline-block, to open up more animation options.

Here we use transform: scaleX() to create a flip effect, as if the emoji has different sides (front and back).

Useful if you're were looking for a different way to transition between the two emojis; rather than a simple fade.

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

How to flip two emojis indefinitely using css

3 Answers3

Linked