JSFiddle - React, Tailwind, and code Playground

by nikolya223

HTML

<div class="click-anim">
    <figure class="pika" style="background-color:#6E9DE2">
        <div class="eye"></div>
        <div class="eye"></div>
        <div class="mouth">
          <div class="tooth"></div>
        </div>
    </figure>
</div>

CSS

.click-anim {
    -webkit-transition: .3s cubic-bezier(.15,.60,.30,1.9);
    transition: .3s cubic-bezier(.15,.60,.30,1.9);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}

figure {
    width: 200px;
    height: 200px;
    padding: 40px;
    box-shadow: inset -10px -30px rgba(0,0,0,.06);
    border-radius: 50%;
    -webkit-animation: bobble 5s ease-in-out infinite;
    animation: bobble 5s ease-in-out infinite;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-transition: padding .3s, bottom .3s;
    transition: padding .3s, bottom .3s;
    text-align: center;
    background: cadetblue;
}
.pika {
    -webkit-animation: hyper 2s infinite;
    animation: hyper 2s infinite;
}
.eye {
    display: inline-block;
    width: 10px;
    height: 15px;
    margin: 0 5px 5px;
    background: rgba(0,0,0,.9);
    border-radius: 10px;
    border-radius: 50%;
    -webkit-animation: blink 4s ease-in-out infinite;
    animation: blink 4s ease-in-out infinite;
}
.mouth {
    display: block;
    width: 100%;
    height: 20px;
    margin: 5px auto 0;
    background: rgba(0,0,0,.9);
    border-radius: 10px 10px 100px 100px;
    border-radius: 10px 10px 50% 50%;
    -webkit-transition: border-radius .5s, height .5s cubic-bezier(.15,.60,.30,1.9);
    transition: border-radius .5s, height .5s cubic-bezier(.15,.60,.30,1.9);
    overflow: hidden;
    line-height: 0;
    -webkit-transform-origin: center top;
    transform-origin: center top;
}
.pika .mouth {
    height: 80px;
    border-radius: 20px 20px 50% 50%;
}
.pika .eye{
  width: 50px;   
  height:30px;  
}
.pika .eye:after{
    width: 20px;   
  height:20px; 
    background: #fff;
    content: "";
    display: block;
    border-radius: 100px;
}