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?

score 2 · Answer 1 · 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

3,505
3
13
33

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

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

1

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_

14,740
2
25
40

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

How to flip two emojis indefinitely using css

2 Answers2

Linked