JSFiddle - React, Tailwind, and code Playground

by kirito0709

HTML

<link rel="stylesheet" href="https://seasonkrasoty.ru/local/templates/adaptive_SK/css/fontawesome-all.min.css">
<link rel="stylesheet" href="https://seasonkrasoty.ru/local/templates/adaptive_SK/css/k.css">
<div class="pseudo_body">
  <div class="character">
    <div class="shit">
      <div class="shitlegs">
         <i class="fas fa-poo"></i>
      </div>
    </div>
  </div>
</div>

CSS

@keyframes left_leg_step {
  from {
    transform: rotate(0deg);
    left: 0;
    bottom: -30px;
    }
  50% {
    transform: rotate(-35deg);
    left: 13px;
    bottom: -35px;
    }
  to {
    transform: rotate(0deg);
    left: 0;
    bottom: -30px;
    }
}

@keyframes right_leg_step {
  from {
    transform: rotate(0deg);
    right: 0;
    bottom: -30px;
    }
  50% {
    transform: rotate(35deg);
    right: 13px;
    bottom: -35px;
    }
  to {
    transform: rotate(0deg);
    right: 0;
    bottom: -30px;
    }
}

@keyframes move {
  from {
    left: 0;
    }
  to {
    left: calc(100% - 50px);
    }
}

.pseudo_body {
  width: 100%;
  height: 71px;
  position: relative;
  border-bottom: 1px solid;
}

.character {
  position: absolute;
  animation: move  15s infinite linear;
}

.shit {
  position: relative;
  width: 50px;
  display: inline-block;
}
.shitlegs i {
  font-size: 50px;
  color: #802020;
  z-index: 1001;
}
.shitlegs::before {
  content: "/";
  z-index: 1000;
  color: #802020;
  font-size: 40px;
  font-weight: 800;
  position: absolute;
  bottom: -30px;
  width: 50%;
  left: 0;
  text-align: right;
  animation: left_leg_step  2s infinite ease-in-out;
}
.shitlegs::after {
  content: "\\";
  z-index: 1000;
  color: #802020;
  font-size: 40px;
  font-weight: 800;
  position: absolute;
  bottom: -30px;
  width: 50%;
  right: 0;
  text-align: left;
  animation: right_leg_step  2s infinite ease-in-out;
  }