Subscribe

CSS makes the world go round ๐ŸŒŽ

โœ๏ธ

Animating emojis with CSS

6 Sep, 2020 ยท 3 min read

On Thursday I came across this really great tweet by Antonia

%[https://twitter.com/NanouuSymeon/status/1301474015760887813?ref_src=twsrc%5Etfw]

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 emoji's โ˜น๏ธ

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 my 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;
}

We make the font-size really big and set our starting emoji ๐ŸŒŽ on our pseudo after class.

Then we set our animation to be world, for a duration of 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 can actually have another layer on top of this, 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 emoji's 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 ๐Ÿ“–

CSS Logos: Figma logo

29 Mar, 2022 ยท 3 min read

CSS Logos: Figma logo

CSS art sucks

28 Mar, 2022 ยท 3 min read

CSS art sucks

Join 1372 devs and subscribe to my newsletter