.container {
  width: 100%;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.path {
  position: absolute;
  width: 100%;
  height: 10px;
  background: repeating-linear-gradient(
    90deg,
    #ccc,
    #ccc 10px,
    #bbb 10px,
    #bbb 20px
  );
  bottom: 50px;
  animation: movePath 5s linear infinite;
}

.dinosaur {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
}

.dino-leg {
  transform-origin: top center;
}

.front-leg {
  animation: walkLegs 0.5s infinite;
}

.back-leg {
  animation: walkLegs 0.5s infinite reverse;
}

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

@keyframes movePath {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -200px 0;
  }
}