<div class="smiley">
  <div class="leftEye"></div>
  <div class="rightEye"></div>
  <div class="mouth"></div>
</div>

html {
  background: rgb(20, 40, 70);
  overflow: hidden;
}

.smiley {
  width: 300px;
  height: 300px;
  background: rgb(255,192,0);
  background: radial-gradient(ellipse at center, #ffc000 0%,#ffac00 100%);
  border-radius: 50%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  top: 50px;
  animation: move 20s infinite;
}

.leftEye, .rightEye {
  width: 50px;
  height: 50px;
  background: black;
  border-radius: 50%;
  position: absolute;
}

.leftEye {
  left: 75px;
  top: 75px;
}

.rightEye {
  right: 75px;
  top: 75px;
  animation: blink 5s infinite;
}

.mouth {
  width: 200px;
  height: 75px;
  background: black;
  border-radius: 10px 10px 75px 75px;
  // Webkit specific
  -webkit-border-bottom-left-radius:100px 75px;
  -webkit-border-bottom-right-radius:100px 75px;
  position: absolute;
  bottom: 50px;
  left: 50px;
  animation: emotions 5s alternate infinite;
}

@keyframes blink {
  90%  {
    height: 50px;
    top: 75px;
    border-radius: 50%;
  }
  92%  {
    height: 0;
    top: 100px;
    border-radius: 10px;
  }
  94%  {
    height: 50px;
    top: 75px;
    border-radius: 50%;
  }
}

@keyframes move {
  0% {
    left: 0;
    top: 50vh;
    transform: translate(0, -50%) rotateZ(0);
  }
  25% {
    left: 50%;
    top: 0;
    transform: translate(-50%, 0) rotateZ(180deg);
  }
  50% {
    left: 100%;
    top: 50vh;
    transform: translate(-100%, -50%) rotate(360deg);
  }
  75% {
    left: 50%;
    top: 100vh;
    transform: translate(-50%, -100%) rotate(180deg);
  }
  100% {
    left: 0;
    top: 50vh;
    transform: translate(0, -50%) rotate(0);
  }
}

@keyframes emotions {
  0% {
    width: 200px;
    height: 75px;
    border-radius: 10px 10px 75px 75px;
    // Webkit specific
    -webkit-border-bottom-left-radius:100px 75px;
    -webkit-border-bottom-right-radius:100px 75px;
    left: 50px;
  }
  10% {
    width: 200px;
    height: 75px;
    border-radius: 10px 10px 75px 75px;
    // Webkit specific
    -webkit-border-bottom-left-radius:100px 75px;
    -webkit-border-bottom-right-radius:100px 75px;
    left: 50px;
  }
  50% {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    // Webkit specific
    -webkit-border-bottom-left-radius:50%;
    -webkit-border-bottom-right-radius:50%;
    bottom: 50px;
    left: 112.5px;
  }
  90% {
    width: 200px;
    height: 75px;
    border-radius: 75px 75px 10px 10px;
    // Webkit specific
    -webkit-border-top-left-radius:100px 75px;
    -webkit-border-top-right-radius:100px 75px;
    bottom: 75px;
    left: 50px;
  }
  100% {
    width: 200px;
    height: 75px;
    border-radius: 75px 75px 10px 10px;
    // Webkit specific
    -webkit-border-top-left-radius:100px 75px;
    -webkit-border-top-right-radius:100px 75px;
    bottom: 75px;
    left: 50px;
  }
}