Penguin by

Stela

On: 10 Jun 2016

fullscreen 
<h1>Let's dance</h1>
<div class="container">
  <div class="head">
    <div class="eye"></div>
    <div class="eye reye"></div>
    <div class="beak"></div>
  </div>
  <div class="body">
    <div class="tummy"></div>
  </div>
  <div class="wing lwing"></div>
  <div class="wing rwing"></div>
  <div class="leg lleg"></div>
  <div class="leg rleg"></div>
</div>

.head {
  background: #222;
  border-radius: 50px 50px 10px 10px / 50px 50px 100px 100px;
  height: 80px;
  margin: 0 auto;
  width: 50px;
  
  position: absolute;
  top: -15px;
  left: 225px;
}
.beak {
  background: orange;
  border-radius: 50px 300px 10px 200px / 20px 100px 8px 80px;
  height: 7px;
  width: 35px;
  
  position: absolute;
  top: 32px;
  left: 25px;
}
.eye {
  background: #000;
  border: 2px solid #f1f2f3;
  border-radius: 50%;
  height: 6px;
  width: 6px;
  
  position: absolute;
  top: 20px;
  left: 10px;
}
.reye {
  position: absolute;
  top: 20px;
  left: 35px;
}
.body {
  animation: pbody 0.5s ease infinite alternate;
  background: #222;
  border-radius: 100px 15px 50px 105px / 50px 15px 100px 105px;
  height: 150px;
  margin: 30px auto;
  width: 150px;
  transform: rotate(-45deg) translateX(0) translateY(0);
  
  position: absolute;
  top: 40px;
  left: 175px;
}
.tummy {
  background: #fff;
  border-bottom: 8px solid #fff;
  border-radius: 100px 15px 50px 105px / 50px 15px 100px 105px;
  height: 130px;
  width: 130px;
  
  position: absolute;
  top: 10px;
  left: 10px;
}
.tummy:before {
  background: linear-gradient(to bottom left, orange 10%, yellow 20%, rgba(255, 255, 255, 0.4) 40%);
  border-radius: 10px 30px 70px 105px / 70px 30px 10px 105px;
  content: " ";
  display: block;
  height: 60px;
  opacity: 0.8;
  width: 60px;
  
  position: absolute;
  top: 0px;
  left: 70px;
}
.lwing {
  animation: lwing 1s ease infinite alternate;
  border-radius: 70px 0 / 20px 0;
  transform: rotate(-30deg) translateY(30px) translateX(-10px);
  
  position: absolute;
  top: 62px;
  left: 110px;
}
.rwing {
  animation: lwing 0.9s ease infinite alternate;
  border-radius: 0 70px / 0 20px;
  transform: rotate(30deg) translateY(30px) translateX(10px);
  
  position: absolute;
  top: 62px;
  left: 270px;
}
.wing {
  background: #222;
  height: 20px;
  width: 120px;
  
  position: absolute;
}
.lleg {
  animation: lleg 0.3s ease infinite alternate;
  
  position: absolute;
  top: 190px;
  left: 200px;
}
.rleg {
  animation: rleg 0.3s ease infinite alternate;

  position: absolute;
  top: 190px;
  left: 275px;
}
.leg {
  background: #222;
  border-radius: 0 0 100px 100px / 0 0 40px 100px;
  height: 30px;
  width: 30px;
  z-index: -1;
}
.container {
  height: 500px;
  margin: 60px auto;
  width: 500px;
  
  position: relative;
}
h1 {
  color: #222;
  font-family: monospace;
  text-align: center;
}
body {
  background: #fff;
}

@keyframes lwing {
  0% {
    transform: rotate(30deg) translateY(30px) transalteX(-10px);
  }
  30% {
    transform: rotate(0) translateY(0) translateX(0);
  }
  45% {
    transform: rotate(25deg) translateY(20px) transalteX(-10px);
  }
  65% {
    transform: rotate(3deg) translateY(3px) transalteX(-4px);
  }
}

@keyframes rwing {
  0% {
    transform: rotate(30deg) translateY(30px) translateX(10px);
  }
  30% {
    transform: rotate(0) translateY(0) translateX(0);
  }
  45% {
    transform: rotate(25deg) translateY(20px) transalteX(10px);
  }
  65% {
    transform: rotate(3deg) translateY(3px) transalteX(4px);
  }
  100% {
    transform: rotate(0) translateY(0) translateX(0);
  }
}

@keyframes pbody {
  0% {
    transform: rotate(-45deg) translateX(2px) translateY(3px);
  }
  100% {
    transform: rotate(-42deg) translateX(-1px) translateY(-2px);
  }
}

@keyframes lleg {
  0% {
    top: 195px;
  }
  100% {
    top: 190px;
  }
}

@keyframes rleg {
  0% {
    top: 190px;
  }
  100% {
    top: 193px;
  }
}

20