Penguin by

Ivan

On: 2 Jun 2016

Personal site: http://codepen.io/sfi0zy/

fullscreen 
<div class="bg"></div>

<div class="penguin">
    <div class="belly"></div>
    <div class="eye"></div>
    <div class="eye"></div>
    <div class="nose"></div>
    <div class="feet"></div>
    <div class="feet"></div>
</div>

@-webkit-keyframes move-penguin {
  0% {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.5);
            transform: translateX(-50%) translateY(-50%) scale(0.5);
  }
  50% {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
            transform: translateX(-50%) translateY(-50%) scale(1);
  }
  80% {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
            transform: translateX(-50%) translateY(-50%) scale(1);
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.5);
            transform: translateX(-50%) translateY(-50%) scale(0.5);
  }
}
@keyframes move-penguin {
  0% {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.5);
            transform: translateX(-50%) translateY(-50%) scale(0.5);
  }
  50% {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
            transform: translateX(-50%) translateY(-50%) scale(1);
  }
  80% {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
            transform: translateX(-50%) translateY(-50%) scale(1);
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.5);
            transform: translateX(-50%) translateY(-50%) scale(0.5);
  }
}
@-webkit-keyframes look {
  0% {
    background-image: -webkit-radial-gradient(at 50% 50%, #000, #000 20%, #fff 21%, #fff);
    background-image: radial-gradient(at 50% 50%, #000, #000 20%, #fff 21%, #fff);
  }
  50% {
    background-image: -webkit-radial-gradient(at 50% 50%, #000, #000 20%, #fff 21%, #fff);
    background-image: radial-gradient(at 50% 50%, #000, #000 20%, #fff 21%, #fff);
  }
  60% {
    background-image: -webkit-radial-gradient(at 80% 50%, #000, #000 20%, #fff 21%, #fff);
    background-image: radial-gradient(at 80% 50%, #000, #000 20%, #fff 21%, #fff);
  }
  70% {
    background-image: -webkit-radial-gradient(at 20% 50%, #000, #000 20%, #fff 21%, #fff);
    background-image: radial-gradient(at 20% 50%, #000, #000 20%, #fff 21%, #fff);
  }
  80% {
    background-image: -webkit-radial-gradient(at 50% 50%, #000, #000 20%, #fff 21%, #fff);
    background-image: radial-gradient(at 50% 50%, #000, #000 20%, #fff 21%, #fff);
  }
  100% {
    background-image: -webkit-radial-gradient(at 50% 50%, #000, #000 20%, #fff 21%, #fff);
    background-image: radial-gradient(at 50% 50%, #000, #000 20%, #fff 21%, #fff);
  }
}
@keyframes look {
  0% {
    background-image: -webkit-radial-gradient(at 50% 50%, #000, #000 20%, #fff 21%, #fff);
    background-image: radial-gradient(at 50% 50%, #000, #000 20%, #fff 21%, #fff);
  }
  50% {
    background-image: -webkit-radial-gradient(at 50% 50%, #000, #000 20%, #fff 21%, #fff);
    background-image: radial-gradient(at 50% 50%, #000, #000 20%, #fff 21%, #fff);
  }
  60% {
    background-image: -webkit-radial-gradient(at 80% 50%, #000, #000 20%, #fff 21%, #fff);
    background-image: radial-gradient(at 80% 50%, #000, #000 20%, #fff 21%, #fff);
  }
  70% {
    background-image: -webkit-radial-gradient(at 20% 50%, #000, #000 20%, #fff 21%, #fff);
    background-image: radial-gradient(at 20% 50%, #000, #000 20%, #fff 21%, #fff);
  }
  80% {
    background-image: -webkit-radial-gradient(at 50% 50%, #000, #000 20%, #fff 21%, #fff);
    background-image: radial-gradient(at 50% 50%, #000, #000 20%, #fff 21%, #fff);
  }
  100% {
    background-image: -webkit-radial-gradient(at 50% 50%, #000, #000 20%, #fff 21%, #fff);
    background-image: radial-gradient(at 50% 50%, #000, #000 20%, #fff 21%, #fff);
  }
}
@-webkit-keyframes walk {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes walk {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
body {
  background: #fff;
}
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: inherit;
}
*:before,
*:after {
  content: "";
}
.bg {
  background: #55f;
  height: 35vw;
  width: 35vw;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  border-radius: 50%;
  border: solid 1vw #000;
}
.penguin {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  background: #000;
  height: 50vw;
  width: 37.5vw;
  border-radius: 50%;
  -webkit-animation: 6s move-penguin infinite;
          animation: 6s move-penguin infinite;
}
.penguin:before,
.penguin:after {
  background: #000;
  height: 20%;
  width: 40%;
  top: 40%;
  z-index: -1;
}
.penguin:before {
  left: -5%;
  -webkit-transform: skew(-45deg);
          transform: skew(-45deg);
}
.penguin:after {
  right: -5%;
  -webkit-transform: skew(45deg);
          transform: skew(45deg);
}
.penguin .belly {
  background: #fff;
  height: 60%;
  width: 60%;
  border-radius: 50%;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.penguin .eye {
  background: #fff;
  height: 15%;
  width: 20%;
  top: 20%;
  border-radius: 50%;
  background-image: -webkit-radial-gradient(50% 50%, circle, #000, #000 20%, #fff 21%, #fff);
  background-image: radial-gradient(circle at 50% 50%, #000, #000 20%, #fff 21%, #fff);
  -webkit-animation: 6s look infinite;
          animation: 6s look infinite;
}
.penguin .eye:nth-of-type(2) {
  left: 20%;
}
.penguin .eye:nth-of-type(3) {
  right: 20%;
}
.penguin .nose {
  height: 7.5vw;
  width: 7.5vw;
  top: 37%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  overflow: hidden;
}
.penguin .nose:before {
  background: #ff0;
  height: 100%;
  width: 100%;
  top: -40%;
  left: 33%;
  -webkit-transform: rotateZ(45deg) translateX(-50%);
          transform: rotateZ(45deg) translateX(-50%);
}
.penguin .feet {
  background: #ff0;
  height: 10%;
  width: 25%;
  bottom: -2%;
  border-radius: 50% 50% 0 0;
}
.penguin .feet:nth-of-type(5) {
  left: 10%;
  -webkit-animation: .5s walk infinite;
          animation: .5s walk infinite;
}
.penguin .feet:nth-of-type(6) {
  right: 10%;
  -webkit-animation: .5s .25s walk infinite;
          animation: .5s .25s walk infinite;
}

35