SOURCE

<p>Bear</p>
<div class="container">
<!--   <div class="ear"></div> -->
<!--   <div class="ear right"></div> -->
  <div class="face">
    <div class="eye"> </div>
    <div class="eye right"> </div>
    <div class="curl"></div>
    <div class="nose"> </div>
    <div class="curl1"> </div>
    <div class="curl2"> </div>
    <div class="mouth"> </div>
  </div>
</div>

.container {
   transform: scale(1.3); 
 }

.container,
.ear, .face, .eye, .nose, .mouth, .curl1, .curl2 {
  position: absolute;
}

.container {
  margin: auto;
  top: 250;
  bottom: 0;
  left: 10;
  right: 0;
  width: 300px;
  height: 150px;
}

.ear {
  top: -60px;
  left: -20px;
  width: 24px;
  // height: 20px;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 40% 90%;
  border-bottom-right-radius: 40% 90%;
  border-top: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid black;
  transform: rotate(-20deg);
}

.ear.right {
  transform: translateX(120px)  rotate(20deg);
}

.eye {
  height: 15px;
  width: 10px;
  background-color: black;
  border-radius: 46%;
  
  -webkit-animation-name: blink;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite; 
  animation-name: blink;
  animation-duration: 4s;
  animation-iteration-count: infinite; 
}

.eye.right {
  height: 15px;
  width: 10px;
  left: 100px;

  background-color: black;
  border-radius: 46%;
  
  -webkit-animation-name: blink;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite; 
  animation-name: blink;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
.curl {
  position:fixed;
  margin-left:-58px;
  height: 49px;
  width: 34px;
  border-radius: 50%;
  border-left: 2px solid black;
  left: 68px;
  top: 26px;
}

.curl1 {
  width: 26px;
  height: 5px;
  border-radius: 50%;
  border-top: 2px solid black;
  top: 20px;
  left: 42px;
}

.nose {
  animation-name:Nose;
  height: 15px;
  width: 38px;
  background-color: black;
  border-radius: 50%;
  top: 30px;
  left: 38px;
}
.nose:hover{
  animation-name:Nose;
  -webkit-animation-duration:3s;
  //height:28px;
  width:28px;
  background-color:black;
  border-radius:50%;
  top:29px;
  left:40px;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite; 
  -webkit-animation-timing-function:linear;
}
@keyframes Nose{
  0% { -webkit-transform: scaleX(0.8) scaleY(0.9); } 
  5% { -webkit-transform: scaleX(0.6) scaleY(0.7); } 
  15% { -webkit-transform: scaleX(0.5) scaleY(0.5); } 
}
.curl2 {
  height: 50px;
  width: 34px;
  border-radius: 50%;
  border-right: 2px solid black;
  left: 68px;
  top: 26px;
}

.mouth {
  width: 15px;
  height: 5px;
  border-radius: 50%;
  border-bottom: 2px solid black;
  top: 80px;
  left: 47px;
  transform: rotate(10deg);
  -webkit-animation-name: blink;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite; 
  animation-name: blink;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@-webkit-keyframes blink { 
  0% { -webkit-transform: scaleX(1) scaleY(1); } 
  5% { -webkit-transform: scaleX(1.3) scaleY(0.1); } 
  15% { -webkit-transform: scaleX(1) scaleY(1); } 
}