(Animasi CSS) Banyak bercakap atau bercakap banyak ..

  Div CSS ini dipetik sebagai kononnya berkata,

"Jika saya menang, saya akan menjaga jawatan saya serta berusaha lebih gigih lagi untuk mengkayakan diri saya, anak dan isteri saya. Anak saya, anak saya. Anak orang, anak orang.. tau la mereka nak jaga. Diharap tuan² dan puan² dapat mengundi saya sebab saya seorang yang jujur, berterus-terang dan tak berbohong. Orang² lain tuu yang banyak berbohong, saya tidak .."

Demo (animasi)

<div class="labu">
<div class="labi">
 <div class="lat_bahu"></div>
  <div class="lat">
    <div class="lat_muka">
      <div class="lat_mata">
        <div class="lat_smata"></div>
        <div class="lat_smata"></div>
      </div>
      <div class="lat_mulut">
        <div class="lat_atas"></div>
        <div class="lat_bawah"></div>
      </div>
    </div>
  </div>  
</div>
</div>
<style>
  .labu *, .labu *::after, .labu *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.labu {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: ;
  background-attachment: fixed;
  padding-bottom: 20px;
  border-radius: 12px;
  height: 250px;
}
.labi {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 400px;
  height: 400px;
}
.lat {
  display: flex;
  justify-content: center;
  position: absolute;
  border-radius: 50%;
  background-color: #eebb99;
  box-shadow: 5px 5px 0 #bbb;  
  animation: goya 2.5s infinite;
}
  .lat_bahu {
  content: "";
  position: absolute;
  bottom: -20px; 
  width: 50%;
  height: 14%;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px; 
  background: #45818e;
  animation: kecilb 2.5s infinite;
  }
  @keyframes goya {
  0% {
    width: 50%;
    height: 55%;
  }
  15% {
    width: 50%;
    height: 60%;
  }
  20% {
    width: 45%;
    height: 60%;
  }
  25% {
    width: 50%;
    height: 55%;
  }
  30% {
    width: 50%;
    height: 60%;
  }
  35% {
    width: 50%;
    height: 60%;
  }
  40% {
    width: 50%;
    height: 55%;
  }
  45% {
    width: 50%;
    height: 60%;
  }
  50% {
    width: 45%;
    height: 60%;
  }
  55% {
    width: 50%;
    height: 55%;
  }
  60% {
    width: 50%;
    height: 45%;
  }
  65% {
    width: 50%;
    height: 50%;
  }
  70% {
    width: 50%;
    height: 55%;
  }
  75% {
    width: 50%;
    height: 55%;
  }
  80% {
    width: 45%;
    height: 60%;
  }
  85% {
    width: 50%;
    height: 45%;
  }
  85% {
    width: 45%;
    height: 50%;
  }
  90% {
    width: 50%;
    height: 45%;
  }
  95% {
    width: 50%;
    height: 45%;
  }
  100% {
    width: 50%;
    height: 50%;
  }
}
  @keyframes kecilb {
  0% {
    width: 50%;
    height: 14%;
  }
  15% {
    width: 51%;
    height: 12%;
  }
  20% {
    width: 50%;
    height: 13%;
  }
  25% {
    width: 52%;
    height: 13%;
  }
  30% {
    width: 51%;
    height: 12%;
  }
  35% {
    width: 50%;
    height: 14%;
  }
  40% {
    width: 51%;
    height: 12%;
  }
  45% {
    width: 50%;
    height: 13%;
  }
  50% {
    width: 51%;
    height: 13%;
  }
  55% {
    width: 50%;
    height: 12%;
  }
  60% {
    width: 51%;
    height: 13%;
  }
  65% {
    width: 50%;
    height: 12%;
  }
  70% {
    width: 52%;
    height: 12%;
  }
  75% {
    width: 50%;
    height: 14%;
  }
  80% {
    width: 50%;
    height: 13%;
  }
  85% {
    width: 52%;
    height: 12%;
  }
  85% {
    width: 50%;
    height: 14%;
  }
  90% {
    width: 52%;
    height: 12%;
  }
  95% {
    width: 51%;
    height: 13%;
  }
  100% {
    width: 50%;
    height: 14%;
  }
}
.lat_muka {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  top: 20%;
  width: 75%;
  height: 200px;
}
.lat_mata {
  display: flex;
  justify-content: space-between;
  width: 28%;
  height: auto;
  margin-bottom: 24px;
}
.lat_smata {
  width: 16px;
  height: 30px;
  border-radius: 40%;
  background: #111;
}
.lat_mulut {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  height: 0%;
  overflow: hidden;
  border: 5px solid #f4cccc;
  border-radius: 100px;
  background-color: #810332;
  animation: mulut 2s infinite;
}
.lat_mulut::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 80px;
  border-radius: 100px;
  background-color: #400018;
}
.lat_mulut::after {
  content: "";
  position: absolute;
  bottom: -80px;
  width: 100px;
  height: 80px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  background-color: #f4cccc;
  animation: lid 2.5s infinite;
}
.lat_atas {
  position: absolute;
  top: -30px;
  width: 100px;
  height: 30px;
  border-bottom-left-radius: 40%;
  border-bottom-right-radius: 40%;
  background-color: #fff;
  z-index: 100;
  animation: tutup 2.5s infinite;
}
.lat_bawah {
  position: absolute;
  bottom: 0;
  width: 100px;
  height: 30px;
  border-top-left-radius: 40%;
  border-top-right-radius: 40%;
  background-color: #fff;
  z-index: 100;
  animation: buka 2.5s infinite;
}
@keyframes tutup {
  0%, 10%, 80%, 100% {
    top: -30px;
  }
  20% {
    top: 0px;
  }
  30% {
    top: -20px;
  }
  40% {
    top: 0px;
  }
  50% {
    top: -25px;
  }
  70% {
    top: 0px;
  }
}
@keyframes buka {
  0%, 10%, 80%, 100% {
    bottom: -30px;
  }
  20% {
    bottom: 0px;
  }
  30% {
    bottom: -20px;
  }
  40% {
    bottom: 0px;
  }
  50% {
    bottom: -25px;
  }
  70% {
    bottom: 0px;
  }
}
@keyframes mulut {
  0% {
    width: 80%;
    height: 40%;
  }
  15% {
    width: 90%;
    height: 30%;
  }
  20% {
    width: 50%;
    height: 70%;
  }
  25% {
    width: 70%;
    height: 70%;
  }
  30% {
    width: 80%;
    height: 60%;
  }
  35% {
    width: 60%;
    height: 70%;
  }
  40% {
    width: 55%;
    height: 75%;
  }
  45% {
    width: 50%;
    height: 90%;
  }
  50% {
    width: 40%;
    height: 70%;
  }
  55% {
    width: 70%;
    height: 95%;
  }
  60% {
    width: 40%;
    height: 50%;
  }
  65% {
    width: 90%;
    height: 60%;
  }
  70% {
    width: 80%;
    height: 70%;
  }
  75% {
    width: 70%;
    height: 70%;
  }
  80% {
    width: 50%;
    height: 70%;
  }
  85% {
    width: 90%;
    height: 50%;
  }
  85% {
    width: 40%;
    height: 70%;
  }
  90% {
    width: 60%;
    height: 30%;
  }
  95% {
    width: 80%;
    height: 20%;
  }
  100% {
    width: 80%;
    height: 40%;
  }
}
 
@keyframes lid {
  0%, 20%, 100% {
    bottom: -80px;
  }
  30%, 90% {
    bottom: -60px;
  }
  40% {
    bottom: -45px;
  }
  50% {
    bottom: -50px;
  }
  70% {
    bottom: -80px;
  }
  90% {
    bottom: -60px;
  }
}
  </style>