Follow Anthony @

Software & Coding Art & Design Social Media Schedule A Meeting Send A Message Support Me Emergency Only
background-shape
feature-image

TLDR: You can animate an Emoji (or anything else) by using keyframes in CSS.

If you go to the home page of this website, you might find some hidden “easter eggs” around the page. One of which is an emoji that is animated using CSS. πŸ‘‹ is the emoji. It’s just a waving hand, that doesn’t actually wave. There is no animation, so I wanted to make it move. It’s actually pretty easy!

Step 1: Create HTML

    <div class="waving" data-hover="πŸ‘‹">
        Hi
    </div>

All I’ve done here is create a simple div with the text, “Hi”. Then I’ve given it 2 HTML attributes, class and data-hover. The contents within data-hover ( πŸ‘‹ ) is what will be animated.

Step 2: Create CSS

.waving:before {
  content: attr(data-hover);
}

.waving:hover {
  animation-name: wave-animation;
  animation-duration: 3.0s;
  animation-iteration-count: infinite;
  transform-origin: 70% 70%;
}

@keyframes wave-animation {
  0% {
      transform: rotate( 0.0deg)
  }
  10% {
      transform: rotate(14.0deg)
  }
  20% {
      transform: rotate(-8.0deg)
  }
  30% {
      transform: rotate(14.0deg)
  }
  40% {
      transform: rotate(-4.0deg)
  }
  50% {
      transform: rotate(10.0deg)
  }
  60% {
      transform: rotate( 0.0deg)
  }
  100% {
      transform: rotate( 0.0deg)
  }
}

.waving:before defines the content of which is to be displayed ( πŸ‘‹ ).

.waving:hover defines what action happens when we hover over that element. In this case we have an animation-name which is defined below in @keyframes wave-animation. We also give it an animation-duration of 3 seconds and tell it to animate infinitely.

@keyframes wave-animation is where we create the actual animation. In this case, I wanted to make the hand wave, so to do this I just want the hand to rotate back and forth. I add different keyframes and tell it to rotate a certain number of degrees in certain intervals. This mimics πŸ‘‹ actually waving!

You can apply this basic template to any emoji. Be creative! For example, you can try to animate a rocket πŸš€ using CSS. Just think of what type of animation you want it to do (possibly translate up and down).


Thanks for reading! πŸ™Œ

Follow me for more content:
Please react or comment to this article, down below!