Sad Emoji Animation with HTML and CSS

Hello!

Today we're going to make a simple animation. We're going to start making a serious face "-_-" and then transform it to a sad one "T_T".

Here is the final result:

Let's start by adding our HTML into our codepen or a .html file.

<div class='container'>
  <div class='tear1 tear'></div>
  <div class='tear2 tear'></div>
  <div class='face'>
      <div class='eyebrow'>︶</div>
      <div class='eyebrow'>︶</div>
      <div class='eye'></div>
      <div class='eye'></div>
      <div class='mouth'></div>
  </div>
</div>

I added descriptive classes to each div to make it easier to read.

Now that our HTML is ready let's go ahead and center vertically and horizontally our main container

.container{
  margin: auto;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}

After this we can get started with the face and the mouth. Our emoji face is going to be 150x150 with a border radius of 50% in order to make a perfect circle, also let's add a position relative since the face is going to be our main container for other components. For the mouth, let's make a rectangle with a height of 10px and a width of 35px, center the element by adding "margin:0 auto" and add any background-color you want, in this case we are going to use gray (#bdc3c7). To position our emoji mouth correctly we need to add a margin-top in order to create space between the eyes and the mouth.

.face{
  width:150px;
  height:150px;
  border: 9px solid #bdc3c7;
  border-radius:50%;
  position:relative;
  z-index:9999;
}


.mouth{
  height:10px;
  width:35px;
  margin: 0 auto;
  margin-top: 15px;
  background-color:#bdc3c7;
}

You should see something really ugly now:

Let's now make the tears. In our HTML we added a common class called "tear" to "tear1" and "tear2", here we are going to add the css that both have in common, a background color, height, width, position and a top value.

.tear{
  position:absolute;
  background-color: #3498db;
  height:0px;
  width:45px;
  top:62px;
}

Why height with 0px? This is because we are going to animate that value, and our starting point needs to be at 0px.

Let's now add the right positioning to each tear and a border radius so tear don't pass the face limits.

.tear1{
  left:29px;
  border-bottom-left-radius:50%;
}

.tear2{
  left:98px;
  border-bottom-right-radius:50%;
}

At this point you are going to see the same exact thing because we haven't added our animations yet, but before adding the animations we need to place our emoji eyes and eyebrows in the correct position.

To make things simple, we are going to use this character "︶" for our eyebrows, but for now we are going to hide this character because is going to show until we add the sad face animation. Let's also rotate the emoji eyebrows to make it look even more sad.

.eye{
  height:10px;
  width:45px;
  background-color:#bdc3c7;
  display:inline-block;
  margin-left:20px;
  margin-top:20px;
}

.eyebrow{
  width:30px;
  font-size:40px;
  font-weight:bold;
  color:#bdc3c7;
  display:inline-block;
  margin-left:27px;
  margin-top: 10px;
  opacity:0;
}

.eyebrow:nth-child(1){
  transform:rotate(-20deg);
}

.eyebrow:nth-child(2){
  transform:rotate(20deg);
}

And now we're all set to add the animations, you should have a serious face by now:

To make the mouth animation we are going to play with the height, width, border-radius, border and margin-top for positioning.

@keyframes mouth{
  10%{height:30px;width:25px; border:6px solid black;border-radius:50%;margin-top:-8px;}
  50%{height:30px;width:25px; border:6px solid black;border-radius:50%;margin-top:-8px;}
  60%{height:10px;width:35px;border-radius:0%;border:none;margin-top:15px;}
}

Now that we have created our first animation, we're going to synchronize the other animations to this one.

@keyframes cry{
  10%{transform:translateY(-34px);background-color:black;}
  50%{transform:translateY(-34px);background-color:black;}
  60%{background-color:#bdc3c7;transform:translateY(0px);}
}

@keyframes eyebrow{
  10%{opacity:1;color:black;}
  50%{opacity:1;color:black;}
  60%{opacity:0;}
}

@keyframes face{
  10%{border-color:black;}
  50%{border-color:black;}
  60%{border-color:#bdc3c7;}
}

@keyframes tear{
  10%{height:96px;}
  50%{height:96px;}
  52%{height:0px;}
}

Now we only need to set the animation to the corresponding divs, we're going to set an animation delay in order to have the serious face for a few seconds at the start.

.face{
  animation: face 7s infinite;
  animation-delay:2s;
}

.mouth{
  animation: mouth 7s infinite;
  animation-delay:2s;
}

.tear{
  animation: tear 7s infinite;
  animation-delay:2s;
}

.eye{
  animation: cry 7s infinite;
  animation-delay:2s;
}

.eyebrow{
  animation: eyebrow 7s infinite;
  animation-delay:2s;
}

Now you are all set!