<div class="Scene">
  <div class="Fence"></div>
  <div class="Sheep Sheep--one">
    <div class="Sheep-legs">
      <div class="Sheep-leg"></div>
      <div class="Sheep-leg"></div>
      <div class="Sheep-leg"></div>
      <div class="Sheep-leg"></div>
    </div>
    <div class="Sheep-body"></div>
    <div class="Sheep-head">
      <div class="Sheep-nose">
        <div class="Sheep-nostril Sheep-nostril--left"></div>
        <div class="Sheep-nostril Sheep-nostril--right"></div>
        <div class="Sheep-mouth"></div>
      </div>
      <div class="Sheep-headFur">
        <div class="Sheep-singleHeadFur"></div>
        <div class="Sheep-singleHeadFur"></div>
        <div class="Sheep-singleHeadFur"></div>
        <div class="Sheep-singleHeadFur"></div>
        <div class="Sheep-singleHeadFur"></div>
        <div class="Sheep-singleHeadFur"></div>
        <div class="Sheep-singleHeadFur"></div>
        <div class="Sheep-singleHeadFur"></div>
        <div class="Sheep-singleHeadFur"></div>
        <div class="Sheep-singleHeadFur"></div>
        <div class="Sheep-singleHeadFur"></div>
        <div class="Sheep-singleHeadFur"></div>
        <div class="Sheep-singleHeadFur"></div>
      </div>
      <div class="Sheep-ear"></div>
      <div class="Sheep-eye Sheep-eye--left"></div>
      <div class="Sheep-eye Sheep-eye--right"></div>
    </div>
  </div>
  <div class="Sheep Sheep--two">
    <div class="Sheep-legs">
      <div class="Sheep-leg"></div>
      <div class="Sheep-leg"></div>
      <div class="Sheep-leg"></div>
      <div class="Sheep-leg"></div>
    </div>
    <div class="Sheep-body"></div>
    <div class="Sheep-head">
      <div class="Sheep-nose">
        <div class="Sheep-nostril Sheep-nostril--left"></div>
        <div class="Sheep-nostril Sheep-nostril--right"></div>
        <div class="Sheep-mouth"></div>
      </div>
      <div class="Sheep-headFur">
        <div class="Sheep-singleHeadFur"></div>
        <div class="Sheep-singleHeadFur"></div>
        <div class="Sheep-singleHeadFur"></div>
        <div class="Sheep-singleHeadFur"></div>
        <div class="Sheep-singleHeadFur"></div>
        <div class="Sheep-singleHeadFur"></div>
        <div class="Sheep-singleHeadFur"></div>
        <div class="Sheep-singleHeadFur"></div>
        <div class="Sheep-singleHeadFur"></div>
        <div class="Sheep-singleHeadFur"></div>
        <div class="Sheep-singleHeadFur"></div>
        <div class="Sheep-singleHeadFur"></div>
        <div class="Sheep-singleHeadFur"></div>
      </div>
      <div class="Sheep-ear"></div>
      <div class="Sheep-eye Sheep-eye--left"></div>
      <div class="Sheep-eye Sheep-eye--right"></div>
    </div>
  </div>
  <div class="Ground"></div>
<div>

$jump-start: 40%;
$jump-length: 20%;
$jump-step-count: 14;
$jump-time-step: $jump-length / $jump-step-count;
$jump-step: 2rem;
$jump-width: 13.3 * $jump-step;
$jump-offset: ($jump-width - 18rem) / 2;
$jump-start-left: calc(-50vw + #{ $jump-offset });

@keyframes jump {
  #{$jump-start} {
    transform: translate3d($jump-start-left, 0, 0);
  }

  #{$jump-start + $jump-time-step} {
    transform: translate3d(calc(-50vw + #{ $jump-offset - 1 * $jump-step }), -2 * $jump-step, 0);
  }

  #{$jump-start + $jump-time-step * 2} {
    transform: translate3d(calc(-50vw + #{ $jump-offset - 2 * $jump-step }), -3.5 * $jump-step, 0);
  }

  #{$jump-start + $jump-time-step * 3} {
    transform: translate3d(calc(-50vw + #{ $jump-offset - 3 * $jump-step }), -4.75 * $jump-step, 0);
  }

  #{$jump-start + $jump-time-step * 4} {
    transform: translate3d(calc(-50vw + #{ $jump-offset - 4 * $jump-step }), -5.75 * $jump-step, 0);
  }

  #{$jump-start + $jump-time-step * 5} {
    transform: translate3d(calc(-50vw + #{ $jump-offset - 5 * $jump-step }), -6.5 * $jump-step, 0);
  }

  #{$jump-start + $jump-time-step * 6} {
    transform: translate3d(calc(-50vw + #{ $jump-offset - 6 * $jump-step }), -6.9 * $jump-step, 0);
  }

  #{$jump-start + $jump-time-step * 7} {
    transform: translate3d(calc(-50vw + #{ $jump-offset - 7 * $jump-step }), -7.2 * $jump-step, 0);
  }

  #{$jump-start + $jump-time-step * 8} {
    transform: translate3d(calc(-50vw + #{ $jump-offset - 8 * $jump-step }), -7 * $jump-step, 0);
  }

  #{$jump-start + $jump-time-step * 9} {
    transform: translate3d(calc(-50vw + #{ $jump-offset - 9 * $jump-step }), -6.8 * $jump-step, 0);
  }

  #{$jump-start + $jump-time-step * 10} {
    transform: translate3d(calc(-50vw + #{ $jump-offset - 10 * $jump-step }), -6.1 * $jump-step, 0);
  }

  #{$jump-start + $jump-time-step * 11} {
    transform: translate3d(calc(-50vw + #{ $jump-offset - 11 * $jump-step }), -5.5 * $jump-step, 0);
  }

  #{$jump-start + $jump-time-step * 12} {
    transform: translate3d(calc(-50vw + #{ $jump-offset - 12 * $jump-step }), -4 * $jump-step, 0);
  }

  #{$jump-start + $jump-time-step * 13} {
    transform: translate3d(calc(-50vw + #{ $jump-offset - 13 * $jump-step }), -1 * $jump-step, 0);
  }

  #{$jump-start + $jump-time-step * 13.5},
  #{$jump-start + $jump-time-step * 14}{
    transform: translate3d(calc(-50vw + #{ $jump-offset - 13.3 * $jump-step }), 0, 0);
  }
  
  90% {
    transform: translate3d(calc(-100vw - #{ $jump-width + 18rem }) 0, 0);
    opacity: 1;
  }
  
  95% {
    transform: translate3d(calc(-100vw - #{ $jump-width + 18rem }), 0, 0);
    opacity: 0;
  }
  
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes ear-wiggle {
  2%,
  6%,
  10% {
    transform: rotate(-9deg);
  }

  4%,
  8% {
    transform: rotate(-15deg);
  }
}

@keyframes front-legs {
  0%,
  20%,
  60%,
  80% {
    transform: rotate(30deg);
  }

  10%,
  30%,
  70%,
  90% {
    transform: rotate(-30deg);
  }

  #{$jump-start} {
    transform: rotate(60deg);
  }

  #{$jump-start + $jump-length}{
    transform: rotate(60deg);
  }
}

@keyframes back-legs {
  0%,
  20%,
  60%,
  80% {
    transform: rotate(-30deg);
  }

  10%,
  30%,
  70%,
  90% {
    transform: rotate(30deg);
  }

  #{$jump-start} {
    transform: rotate(-60deg);
  }

  #{$jump-start + $jump-length}{
    transform: rotate(-60deg);
  }
}

@keyframes body-jump {
  #{$jump-start} {
    transform: rotate(0);
  }

  #{$jump-start + $jump-time-step} {
    transform: rotate(1deg);
  }

  #{$jump-start + $jump-time-step * 2} {
    transform: rotate(2deg);
  }

  #{$jump-start + $jump-time-step * 3} {
    transform: rotate(3deg);
  }

  #{$jump-start + $jump-time-step * 4} {
    transform: rotate(4deg);
  }

  #{$jump-start + $jump-time-step * 13} {
    transform: rotate(6deg);
  }

  #{$jump-start + $jump-time-step * 13.5},
  #{$jump-start + $jump-time-step * 14}{
    transform: rotate(0);
  }

  100% {
    transform: rotate(0);
  }
}


*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
.Scene {
  font-size: 6px;
  height: 100%;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}

@media (min-width: 700px) {
  html {
    font-size: 10px;
  }
}

@media (min-width: 1800px) {
  html {
    font-size: 14px;
  }
}

.Scene {
  background: #68C7EC;
}

.Ground {
  height: 10%;
  background: #92C749;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.Fence {
  position: absolute;
  width: 2rem;
  height: 8rem;
  border-radius: 1rem 1rem 0 0;
  background: #772E23;
  bottom: 10%;
  left: 50%;
}

.Sheep {
  width: 18rem;
  height: 19rem;
  position: fixed;
  left: 100%;
  bottom: 10%;
  z-index: 1;
  animation: jump linear 5s infinite;
  animation-fill-mode: none;
  transform-style: preserve-3d;
  bacface-visibility: hidden;
}

.Sheep--two {
  &,
  .Sheep-ear,
  .Sheep-body,
  .Sheep-leg:nth-child(1),
  .Sheep-leg:nth-child(2),
  .Sheep-leg:nth-child(3),
  .Sheep-leg:nth-child(4){
    animation-delay: 2s;
  }
}

// Head, sheep's head that is

.Sheep-head {
  width: 11.8rem;
  height: 11.6rem;
  position: absolute;
  left: 0;
  top: 0;
}

.Sheep-nose {
  height: 8rem;
  width: 9rem;
  border-radius: 50%;
  position: absolute;
  left: 0;
  bottom: 0;
  background: #fff;

  &::after {
    display: block;
    content: '';
    background: #fff;
    position: absolute;
    top: -1rem;
    left: 4.3rem;
    height: 2.1rem;
    width: 5.1rem;
    transform: rotate(30deg);
  }
}

.Sheep-mouth {
  border: 0.2rem solid transparent;
  border-left-color: #000;
  height: 1.5rem;
  border-radius: 50%;
  width: 0.8rem;
  position: absolute;
  top: 4.7rem;
  left: 2.1rem;
  transform: rotate(-10deg);
}

.Sheep-nostril {
  height: 1.6rem;
  border-radius: 50% 50% 35% 35%;
  width: 0.2rem;
  background: #000;
  position: absolute;

  &::after {
    display: block;
    content: '';
    background: #000;
    position: absolute;
    height: 0.8rem;
    width: 0.4rem;
    bottom: 0;
    border-radius: 50%;
    left: -0.1rem;
  }
}

.Sheep-nostril--left {
  top: 3.2rem;
  left: 3.2rem;
  transform: rotate(60deg);
}

.Sheep-nostril--right {
  top: 2.9rem;
  left: 1.7rem;
  transform: rotate(-25deg);
}

.Sheep-headFur {
  position: absolute;
  right: -0.5rem;
  top: 1rem;
  width: 7.5rem;
  height: 3rem;
  transform: rotate(30deg);

  &::after {
    background: #ddd;
    position: absolute;
    content: '';
    width: 70%;
    height: 40%;
    top: 30%;
    left: 15%
  }
}

.Sheep-singleHeadFur {
  border-radius: 50%;
  background: #ddd;
  z-index: 1;
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;

  &:nth-child(1) {
    top: 0.8rem;
    left: 0.3rem;
  }

  &:nth-child(2) {
    top: 0rem;
    left: 1.2rem;
  }

  &:nth-child(3) {
    top: -0.3rem;
    left: 2.2rem;
  }

  &:nth-child(4) {
    top: -0.2rem;
    left: 3.4rem;
  }

  &:nth-child(5) {
    top: -0.2rem;
    left: 3.4rem;
  }

  &:nth-child(6) {
    top: 0rem;
    left: 4.5rem;
  }

  &:nth-child(7) {
    top: 0.3rem;
    left: 5.8rem;
  }

  &:nth-child(8) {
    top: 1.2rem;
    left: 6.2rem;
  }

  &:nth-child(9) {
    top: 1.2rem;
    left: 4.1rem;
  }

  &:nth-child(10) {
    top: 1rem;
    left: 3rem;
  }

  &:nth-child(11) {
    top: 1.1rem;
    left: 1.8rem;
  }

  &:nth-child(12) {
    top: 1.7rem;
    left: 0.7rem;
  }

  &:nth-child(13) {
    top: 1.7rem;
    left: -0.2rem;
  }
}

.Sheep-ear {
  background: #444;
  width: 3rem;
  height: 6rem;
  position: absolute;
  right: 0.8rem;
  top: 3.8rem;
  border-radius: 40% 50% 45%;
  transform: rotate(-9deg);
  animation: ear-wiggle 3s infinite;
  transform-origin: top left;
}

.Sheep-eye {
  height: 0.8rem;
  width: 1rem;
  background: #000;
  position: absolute;
  border-radius: 50%;

  &::after {
    height: 0.3rem;
    width: 0.3rem;
    background: #fff;
    border-radius: 50%;
    display: block;
    content: '';
    position: absolute;
  }
}

.Sheep-eye--right {
  transform: rotate(-20deg);
  top: 3rem;
  left: 3.7rem;

  &::after {
    top: 0.2rem;
    left: 0.4rem;
  }
}

.Sheep-eye--left {
  transform: rotate(20deg);
  top: 3.2rem;
  left: 5.2rem;

  &::after {
    top: 0.2rem;
    left: 0.3rem;
  }
}

// Body, sheep's one again

.Sheep-body {
  width: 15rem;
  height: 10rem;
  // border: 0.1rem solid red;
  position: absolute;
  right: 0;
  top: 6rem;
  border-radius: 40% 50% 40% 40%;
  background: #ddd;

  animation: body-jump linear 5s infinite;
}

// Legs

.Sheep-legs {
  position: absolute;
  bottom: 0;
  left: 4.5rem;
  height: 4rem;
  width: 11rem;
}

.Sheep-leg {
  position: absolute;
  width: 0.8rem;
  height: 1.8rem;
  background: #000;
  border-radius: 0 0 0.4rem 0.4rem;
  transform-origin: top center;

  &::before,
  &::after {
    content: '';
    position: absolute;
    display: block;
    background: #000;
  }

  &::before {
    width: 0.8rem;
    height: 1.8rem;
    top: 1.3rem;
    border-radius: 0.4rem 0.4rem 0 0;
    transform-origin: top center;
  }

  &::after {
    width: 1.8rem;
    height: 1.6rem;
    border-radius: 50% 50% 30% 30%;
    top: 2.6rem;
    left: -0.5rem;
  }

  &:nth-child(1) {
    left: 1rem;
    animation: front-legs 5s infinite linear;
  }

  &:nth-child(2) {
    left: 2.2rem;
    animation: front-legs 5s infinite linear;
  }

  &:nth-child(3) {
    left: 8.3rem;
    animation: back-legs 5s infinite linear;
  }

  &:nth-child(4) {
    left: 9.5rem;
    animation: back-legs 5s infinite linear;
  }
}