How to Make an Animated Emoji Face

Nilesh    9/09/2020    Blogger Trick   

This time I give you how to make a moving emoji face, only using this CSS
script made by Kyle Adams,

you can apply this emoji to your blog, just go to the red line

Copy the following CSS on your Blog, in the HTML edit section, you must already know you have to where is it, so no need to be fed again

<style type='text/css'>
.emoji {
  box-sizing: border-box;
  float: left;
}

.face {
  width: 100px;
  height: 100px;
  position: relative;
  margin: 0 15px 30px 0;
  border-radius: 50%;
  background: #F2DD68;
}

.face:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: -8px;
  left: -8px;
  border-radius: 50%;
  box-shadow: 8px 8px 0 0 rgba(0, 0, 0, 0.07);
}

.eye {
  position: absolute;
  width: 11px;
  height: 11px;
  top: 32px;
  left: 16px;
  z-index: 1;
  border-radius: 50%;
  background: #995710;
}

.eye:last-child {
  left: auto;
  right: 16px;
}

.emoji:hover .eye {
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-duration: 2s;
}

@keyframes blink {
  10% {
    height: 11px;
    top: 32px;
  }
  30% {
    height: 1px;
    top: 37px;
  }
  50% {
    height: 11px;
    top: 32px;
  }
}

.mouth {
  position: absolute;
  top: 48px;
  left: 0;
  right: 0;
  z-index: 1;
  width: 70px;
  height: 34px;
  margin: 0 auto;
  border-radius: 0 0 70px 70px;
  overflow: hidden;
  background: #995710;
}

.mouth:before,
.mouth:after {
  content: '';
  position: absolute;
  display: block;
}

.mouth.teath:before {
  width: 100%;
  height: 10px;
  z-index: 2;
  background: #fffae6;
}

.mouth.tounge:after {
  position: absolute;
  width: 38px;
  height: 38px;
  left: 0;
  right: 0;
  top: 15px;
  margin: 0 auto;
  border-radius: 50%;
  background: #d8aa2b;
}


/*------ Grin Emoji Styling ------*/

.grin .eye {
  transition: all 0.3s ease-in-out;
}

.grin:hover .eye {
  animation: none;
  height: 2px;
  top: 36px;
}

.grin:hover .mouth {
  animation-name: giggle;
  animation-iteration-count: infinite;
  animation-duration: 0.2s;
}

@keyframes giggle {
  0% {
    transform: translate(0, -1px);
  }
  50% {
    transform: translate(0, 2px);
  }
  100% {
    transform: translate(0, -1px);
  }
}


/*------ Sad Emoji Styling ------*/

.sad .mouth {
  top: 44px;
  border-radius: 70px 70px 0 0;
}

.sad .mouth:before {
  display: none;
}


/*------ Shocked Emoji Styling ------*/

.shocked .mouth {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.shocked .eye {
  transition: all 0.2s ease-in-out;
}

.shocked:hover .eye {
  animation: none;
  transform: scale(1.3, 1.3);
  transition: all 1.5s ease-out;
}

.shocked:hover .mouth {
  animation-name: wow;
  animation-iteration-count: infinite;
  animation-duration: 2.5s;
}

@keyframes wow {
  70% {
    transform: scale(0.5, 0.5);
  }
  100% {
    transform: scale(1, 1);
  }
}


/*------ Smiling Emoji Styling ------*/

.smile .mouth {
  width: 50px;
  height: 25px;
  background: transparent;
  border-radius: 0 0 50px 50px;
  border: 4px solid #995710;
  border-top: 0;
  -webkit-clip-path: inset(30% 0 0 0);
  clip-path: inset(30% 0 0 0);
}


/*------ Speechless Emoji Styling ------*/

.speechless .mouth {
  width: 70px;
  height: 4px;
  top: 60px;
  border-radius: 0;
}


/*------ Love Emoji Styling ------*/

.heart-eye {
  position: absolute;
  top: 30px;
  left: 16px;
  transform: rotate(-15deg);
}

.heart-eye:last-child {
  left: auto;
  right: 16px;
  transform: rotate(15deg);
}

.heart {
  display: block;
  width: 16px;
  height: 16px;
  background: #e25d5d;
  transform: rotate(-45deg);
}

.heart:before,
.heart:after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e25d5d;
}

.heart:before {
  top: -8px;
  left: 0;
}

.heart:after {
  left: 8px;
  top: 0;
}

.love .mouth {
  transform: scale(0.5, 0.5);
}

.love:hover .heart-eye {
  animation-name: pulse;
  animation-iteration-count: infinite;
  animation-duration: 1s;
}

.love:hover .heart-eye:last-child {
  animation-name: pulse-right;
}

@keyframes pulse {
  30% {
    transform: scale(1.1, 1.1) rotate(-15deg);
  }
  70% {
    transform: scale(1, 1) rotate(-15deg);
  }
}

@keyframes pulse-right {
  30% {
    transform: scale(1.1, 1.1) rotate(15deg);
  }
  70% {
    transform: scale(1, 1) rotate(15deg);
  }
}


/*------ Angry Emoji Styling ------*/

.angry .face {
  background: #e25d5d;
  transition: all 500ms ease-in-out;
}

.angry:hover .face {
  background: #e84747;
  animation-name: fuming;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-timing-function: linear;
}

@keyframes fuming {
  10% {
    transform: translate(-5px);
  }
  15% {
    transform: translate(5px);
  }
  20% {
    transform: translate(-5px);
  }
  25% {
    transform: translate(5px);
  }
  30% {
    transform: translate(-5px);
  }
  35% {
    transform: translate(5px);
  }
  40% {
    transform: translate(-5px);
  }
  45% {
    transform: translate(5px);
  }
  50% {
    transform: translate(0);
  }
}

.angry .eye,
.angry .eye:before,
.angry .mouth {
  background: #7f2626;
}

.angry .eye:before {
  content: '';
  display: block;
  position: absolute;
  width: 20px;
  height: 5px;
  top: -1px;
  left: -4px;
  transform: rotate(20deg);
}

.angry .eye:last-child:before {
  left: auto;
  right: -4px;
  transform: rotate(-20deg);
}

.angry .mouth {
  width: 20px;
  height: 4px;
  top: 64px;
  border-radius: 0;
}
</style>

If so,
enter the HTML code below into your blog post, or it's up to you to put this HTML code where, on the sidebar widget you can too,

<div class="emoji grin">
      <figure class="face">
        <span class="eyes">
          <span class="eye"></span>
          <span class="eye"></span>
        </span>
        <span class="mouth teath tounge">
        </span>
      </figure>
    </div>
    <div class="emoji sad">
      <figure class="face">
        <span class="eyes">
          <span class="eye"></span>
          <span class="eye"></span>
        </span>
        <span class="mouth tounge">
        </span>
      </figure>
    </div>
    <div class="emoji shocked">
      <figure class="face">
        <span class="eyes">
          <span class="eye"></span>
          <span class="eye"></span>
        </span>
        <span class="mouth">
        </span>
      </figure>
    </div>
    <div class="emoji laugh">
      <figure class="face">
        <span class="eyes">
          <span class="eye"></span>
          <span class="eye"></span>
        </span>
        <span class="mouth tounge">
        </span>
      </figure>
    </div>
    <div class="emoji smile">
      <figure class="face">
        <span class="eyes">
          <span class="eye"></span>
          <span class="eye"></span>
        </span>
        <span class="mouth">
        </span>
      </figure>
    </div>
    <div class="emoji speechless">
      <figure class="face">
        <span class="eyes">
          <span class="eye"></span>
          <span class="eye"></span>
        </span>
        <span class="mouth">
        </span>
      </figure>
    </div>
    <div class="emoji love">
      <figure class="face">
        <span class="eyes">
          <span class="heart-eye">
            <span class="heart"></span>
          </span>
          <span class="heart-eye">
            <span class="heart"></span>
          </span>
        </span>
        <span class="mouth tounge">
        </span>
      </figure>
    </div>
    <div class="emoji angry">
      <figure class="face">
        <span class="eyes">
            <span class="eye"></span>
            <span class="eye"></span>
        </span>
        <span class="mouth">
        </span>
      </figure>
    </div>

The emoji will move when the mouse is hovered over the emoticon,
this is using a hover, so you don't need to click on the emoji, you just need to point the cursor over the emoté.

If you want to change the size, you can edit the CSS,
you only need to find the width, height or something related to the size,
if you don't know, search on Google.

An example you can see below

• RESULT