A Pen by Ali BARIN.

index.html

<div class="bunny">
  <div id="eye-1" class="eye"></div>
  <div id="eye-2" class="eye"></div>
  
  <div class="mouth"></div>
</div>

Pinky-Bunny.markdown

Pinky Bunny

A Pen by Ali BARIN on CodePen.

License.

style.scss

@import "compass";
$pink:         #d1457e;

.bunny{
  background: $pink;
  border-radius: 50px;
  height: 100px;
  left: 100px;
  position: relative;
  top: 100px;
  width: 100px;
  
  &:before, &:after{
    background: $pink;
    border-radius: 30px 30px 10px 10px;
    bottom: 65%;
    border: 3px solid #fff;
    border-top: 0;
    border-bottom: 0;
    content: ' ';
    display: block;
    height: 100px;
    position: absolute;
    transform-origin: 50% 100%;
    width: 40px;
  }
  
  &:before{
    animation: ear-1 3s infinite;
    left: 5px;
    transform: rotate(45deg);
    z-index: -2;
  }
  
  &:after{
    animation: ear-2 3s infinite;
    right: 5px;
    transform: rotate(-45deg);
    z-index: -1;
  }
  
  .eye{
    background: #fff;
    border-radius: 20px;
    height: 20px;
    position: absolute;
    top: 35%;
    width: 20px;
    
    &#eye-1{ left: 22%; }
    &#eye-2{ right: 22%; }
  }
  
  .mouth{
    border: 3px solid #fff;
    border-radius: 50px;
    bottom: 15px;
    clip: rect(25px, 44px, 36px, 0px);
    height: 30px;
    left: 50%;
    margin-left: -23px;
    position: absolute;
    width: 40px;
  }
}

@keyframes ear-1{
  0%{
    transform: rotate(45deg);
  }
  
  50%{
    transform: rotate(0deg);
  }
  
  100%{
    transform: rotate(45deg);
  }
}

@keyframes ear-2{
  0%{
    transform: rotate(-45deg);
  }
  
  50%{
    transform: rotate(0deg);
  }
  
  100%{
    transform: rotate(-45deg);
    z-index: (random(2) + 1) * -1;
  }
}