<div id="pufferfish">
  <div class="eye" id="right-eye"></div>
  <div class="eye" id="left-eye"></div>
  <div id="mouth"></div>
  <div id="top-fin"></div>
  <div id="side-fin"></div>
  <div id="back-fin"></div>
  <div id="spots"></div>
</div>

body {
  height: 100vh;
  background: rgb(119,162,176);
  background: linear-gradient(0deg, rgba(119,162,176,1) 0%, rgba(223,239,244,1) 100%);
  display: grid;
  place-items: center;
}
#pufferfish {
  height: 120px;
  width: 200px;
  border-radius: 40% 50% 50% 40%;
  background: rgb(255,255,255);
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,159,0,1) 100%);
  animation: MoveUpDown 6s linear infinite;
  transition: all 1s ease;
}
#pufferfish:hover {
  height: 500px;
  width: 500px;
  border-radius: 50%;
}
.eye {
  position: absolute;
  left: 30%;
  bottom: 50%;
  height: 30px;
  width: 30px;
  background-color: #FFFFFF;
  border-radius: 50%;
  border: 1px solid #aaa;
}
#left-eye {
  left: calc(30% - 40px);
}
.eye:before {
  content: "";
  position: absolute;
  height: 15px;
  width: 15px;
  background-color: #333;
  margin-left: 7px;
  margin-top: 7px;
  border-radius: 50%;
}
#pufferfish:hover .eye:before {
  transform: rotate(45deg);
  height: 15px;
  width: 15px;
  background-color: #fff;
  border: 2px solid #333;
  border-radius: 0%;
  border-right: none;
  border-top: none;
}
#pufferfish:hover #left-eye {
  transform: rotate(180deg);
}
#mouth {
  position: absolute;
  left: calc(30% - 16px);
  bottom: calc(50% - 20px);
  height: 8px;
  width: 16px;
  border-radius: 0 0 12px 12px;
  border: 2px solid #333;
  border-top: none;
}
#pufferfish:hover #mouth {
  width: 8px;
  border-radius: 0 12px 12px 0;
  border: 2px solid #333;
  border-left: none;
}
#mouth:before {
  content: "";
  position: absolute;
}
#mouth:after {
  content: "";
  position: absolute;
}
#pufferfish:hover #mouth:before {
  left: calc(30% + 12px);
  bottom: calc(50% - 6px);
  height: 8px;
  width: 8px;
  border-radius: 12px 0 0 12px;
  border: 2px solid #333;
  border-right: none;
}
#pufferfish:hover #mouth:after {
  left: calc(30% + 6px);
  bottom: calc(50% - 1px);
  height: 2px;
  width: 6px;
  background-color: #333;
  border-radius: 0%;
}
#top-fin {
  position: absolute;
  top: -10px;
  left: 52%;
  height: 16px;
  width: 48px;
  background: rgba(255,159,0,1);
  border-radius: 24px 0 24px 0;
  border: 2px solid rgba(255,159,0,1);
  border-bottom: none;
  transform: rotate(10deg);
}
#back-fin {
  position: absolute;
  top: 35%;
  left: 90%;
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-right: 50px solid rgba(255,159,0,1);
  border-bottom: 25px solid transparent;
  border-radius: 25%;
  transition: all 1s ease;
  transform-origin: left;
  animation: ShakeBackSlow 2s linear infinite;
}

#pufferfish:hover #back-fin {
  top: 42%;
  left: 92%;
}

#side-fin {
  position: absolute;
  top: 59%;
  left: 52%;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-right: 30px solid rgba(255,159,0,1);
  border-bottom: 15px solid transparent;
  border-radius: 25%;
  transform: rotate(10deg);
  transform-origin: left;
  animation: ShakeSideSlow 2s linear infinite;
}

#spots {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: all 1s ease;
  box-shadow: 
    10px 40px 0 0 rgba(255,255,0,0.5),
    70px 10px 0 0 rgba(255,255,0,0.5),
    110px 50px 0 0 rgba(255,255,0,0.5),
    145px 20px 0 0 rgba(255,255,0,0.5),
    180px 43px 0 0 rgba(255,255,0,0.5);
}

#pufferfish:hover #spots {
  box-shadow: 
    calc(10px * 2.5) calc(40px * 4.166) 0 0 rgba(255,255,0,0.5),
    calc(70px * 2.5) calc(10px * 4.166) 0 0 rgba(255,255,0,0.5),
    calc(110px * 2.5) calc(50px * 4.166) 0 0 rgba(255,255,0,0.5),
    calc(145px * 2.5) calc(20px * 4.166) 0 0 rgba(255,255,0,0.5),
    calc(180px * 2.5) calc(43px * 4.166) 0 0 rgba(255,255,0,0.5);
}

#pufferfish:hover #side-fin {
  animation: ShakeSideFast 400ms linear infinite;
}

#pufferfish:hover #back-fin {
  animation: ShakeBackFast 400ms linear infinite;
}

@keyframes MoveUpDown {
  0%, 50%, 100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(0, 11px);
  }
  75% {
    transform: translate(0px, -11px);
  }
}

@keyframes ShakeSideSlow {
  0%, 50%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(10deg);
  }
}

@keyframes ShakeBackSlow {
  0%, 50%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(10deg);
  }
  75% {
    transform: rotate(-10deg);
  }
}

@keyframes ShakeSideFast {
  0%, 50%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-20deg);
  }
  75% {
    transform: rotate(20deg);
  }
}

@keyframes ShakeBackFast {
  0%, 50%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(20deg);
  }
  75% {
    transform: rotate(-20deg);
  }
}