Template:TEOWTest.css

.rocky-herd {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px; /* Adjust as needed */
  pointer-events: none;
  overflow: hidden;
}

.rocky {
  position: absolute;
  bottom: 0;
  background-image: url('https://camp2.rectangle.zone/subwikifiles/wc2/images/1/1e/BFDI_1a_Rocky.png');
  background-size: contain;
  background-repeat: no-repeat;
  animation: jumpAndMove 3s linear infinite;
}

/* Adding multiple classes for different sizes since calc/variables may not be supported */
.rocky.size1 { width: 50px; height: 50px; }
.rocky.size2 { width: 75px; height: 75px; }
.rocky.size3 { width: 40px; height: 40px; }
.rocky.size4 { width: 60px; height: 60px; }
.rocky.size5 { width: 45px; height: 45px; }

@keyframes jumpAndMove {
  0% {
    left: 100vw;
  }
  50% {
    left: 50vw;
    bottom: 20px; /* Adjust jump height */
  }
  100% {
    left: -100px;
    bottom: 0;
  }
}