<div class="emojis"></div>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  font-family: "Exo", Arial, sans-serif;
  background-color: #f7f7f7;
}

:root {
  --emojis: "❤️‍🔥";
}

div::before {
  content: var(--emojis);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 10vw;
  filter: drop-shadow(2px 4px 6px black);
  animation: emojis 12s steps(10) infinite;
}

@keyframes emojis {
  0% {
    --emojis: "❤️‍🔥";
  }

  10% {
    --emojis: "💞";
  }

  20% {
    --emojis: "💖";
  }

  30% {
    --emojis: "💘";
  }

  40% {
    --emojis: "💔";
  }

  50% {
    --emojis: "🔥";
  }

  60% {
    --emojis: "🧨";
  }

  70% {
    --emojis: "💯";
  }

  80% {
    --emojis: "🍔";
  }

  90% {
    --emojis: "🪔";
  }

  100% {
    --emojis: "🐻";
  }
}