.ginasta {
  --angle: 18deg;
  --duration: 1.8s;
  transform-origin: 50% 0;
  display: inline-block;
  animation: ginasta var(--duration) ease-in-out infinite alternate;
  backface-visibility: hidden;
}

.palhaco {
  --angle: 3deg;
  --duration: 1s;
  transform-origin: 50% 100%;
  display: inline-block;
  animation: palaco var(--duration) ease-in-out infinite alternate;
  backface-visibility: hidden;
}

@keyframes ginasta {
  from {
    transform: rotate(calc(-1 * var(--angle)));
  }
  to {
    transform: rotate(var(--angle));
  }
}

@keyframes palaco {
  from {
    transform: rotate(calc(-1 * var(--angle)));
  }
  to {
    transform: rotate(var(--angle));
  }
}