hugoDocs/pipeline/scss/components/_gopher.scss

// SVG base fills
.cls-1 {fill:#11485e;}
.cls-2 {fill:#7fc2e2;}
.cls-3 {fill:#d8d5d5;}
.cls-4 {fill:#131413;}
.cls-5 {fill:#fff;}
.cls-6 {fill:#b28f82;}
.cls-7 {fill:#231f20;}
.cls-8 {fill:#418cbd;}

// calling animations
.eye {
  animation: squeeze 2.4s infinite;
}
.nose {
  animation: nose 2s infinite ease;
}
.gopher {
  transform: translateY(120px);
  animation: start .8s forwards ease-in-out;
}
// setting animations
// @keyframes start {
//   100% { transform: translateY(0); }
// }
@keyframes nose {
  80% { transform: none;}
  83% { transform: translateX(7.5px) scaleX(0.9); }
  90% { transform: none;}
  93% { transform: translateX(7.5px) scaleX(0.9); }
  100% { transform: none; }
}
@keyframes squeeze {
  90% { transform: none; animation-timing-function: ease-in; }
  93% { transform: translateY(70px) scaleY(.1); }
  100% { animation-timing-function: ease-out; }
}