Subscribe

CSS makes the world go round 馃寧

鉁嶏笍

Animating emojis with CSS

6 Sep, 2020 路 3 min read

On Thursday, I came across this great tweet by Antonia

And I was inspired by it, so I wanted to have a look at this! (Yes, I'm addicted to smileys!)

So today, we'll make the world go round with CSS.

It's not as smooth as Antonia's example because the world only has three emojis 鈽癸笍

HTML Structure

Our HTML is the simplest ever. Only one div!

<div class="world"></div>

CSS spinning world emoji

As for CSS, this is where the magic happens!

Let's start by making the body a display flex and center everything with flex.

body {
  background: #333;
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

Next up to our div!

.world {
  font-size: 250px;
  width: 250px;
  height: 328px;
}
.world::before {
  position: absolute;
  content: '馃寧';
  z-index: 1;
  animation: world-tween 1s infinite;
}
.world::after {
  position: absolute;
  content: '馃寧';
  animation: world 1s infinite;
}

After class, we make the font size big and set our starting emoji 馃寧 on our pseudo.

Then we set our animation to be world, for 1 second and loop forever!

All we need to do now is make the world animation:

@keyframes world {
  33% {
    content: '馃實';
  }
  66% {
    content: '馃審';
  }
}

Spencer mentioned we could have another layer on top, which can hold a tween animation, including opacity, to make it slightly smoother. We added a ::before pseudo-element to make this happen.

And for our world-tween animation:

@keyframes world-tween {
  16.5% {
    content: '馃實';
    opacity: 0.5;
  }
  33% {
    opacity: 0;
  }
  50% {
    content: '馃審';
    opacity: 0.5;
  }
  66% {
    opacity: 0;
  }
  83% {
    content: '馃寧';
    opacity: 0.5;
  }
}

There are only two world emojis left, so we split our animation in two and set our content!

That's it. CSS can make the world go round!

View this demo on Codepen.

See the Pen CSS Makes the world go round 馃實 by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 馃摉

Bringing perspective to CSS

7 Aug, 2022 路 2 min read

Bringing perspective to CSS

Creating a 3D Cylinder shape in CSS

29 Jul, 2022 路 3 min read

Creating a 3D Cylinder shape in CSS

Join 1829 devs and subscribe to my newsletter