taza.css

.margen {
  position: fixed;
  left: 276px;
  height: 317px;
  width: 235px;
  clip-path: polygon(0 0, 100% 0, 79% 100%, 17% 100%);
  background-color: rgb(0, 0, 0);
  margin-top: 120px;
}

.taza {
  height: 280px;
  width: 280px;
  clip-path: polygon(13% 1%, 84% 0, 70% 100%, 25% 100%);
  background-color: rgb(255, 255, 255);
  top: 130px;
  position: fixed;
  left: 257px;
}

.animation-taza {
  background-color: #ffda1a;
  animation: taza 1.5s ease-in-out infinite;
  border-style: blue;
  height: 300px;
}

.text-js {
  position: fixed;
  top: 335px;
  z-index: 1;
  left: 385px;
  font-size: 60px;
}

.pajilla {
  position: fixed;
  background-color: black;
  width: 20px;
  height: 200px;
  left: 429px;
  bottom: 358px;
  transform: rotate(5deg);
}

.pajilla-amarilla {
  position: fixed;
  background-color: #ffda1a;
  width: 20px;
  height: 65px;
  left: 418px;
  bottom: 300px;
  transform: rotate(5deg);
}

.pajilla-boquilla {
  position: fixed;
  border-top: 20px solid black;
  height: 2px;
  margin: 20px auto 0 auto;
  width: 97px;
  left: 438px;
  top: 40px;
}

/* ANIMACION DE JUEGO PARA TAZA */
@keyframes taza {
  0%,
  100% {
    clip-path: polygon(
      0 37%,
      12% 37%,
      25% 45%,
      36% 52%,
      57% 60%,
      82% 53%,
      100% 32%,
      100% 100%,
      0% 100%
    );
  }
  50% {
    clip-path: polygon(
      0 55%,
      17% 61%,
      36% 64%,
      51% 59%,
      68% 45%,
      84% 42%,
      100% 43%,
      100% 100%,
      0% 100%
    );
  }
}