[class^="bat-container"] {
  width: 133.3333333333px;
  height: 66.6666666667px;
  position: absolute;
  z-index: 11;
}

.bat {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  transform: translatey(10px);
  animation: bat 0.2s ease-in 0s infinite alternate;
}
.bat-bg,
.bat > span,
.bat:after,
.bat:before {
  background: url(../../img/halloween_template/bat.png);
  background-size: cover;
}
.bat:before {
  content: "";
  display: block;
  width: 44%;
  height: 100%;
  background-position: 0 0;
  transform-origin: 100% 46%;
  transform: rotate3d(1, 0.8, 0.1, 50deg);
  animation: left-wing 0.2s ease-in 0s infinite alternate;
}
.bat:after {
  content: "";
  display: block;
  width: 44%;
  height: 100%;
  background-position: 100% 0;
  transform-origin: 0 46%;
  transform: rotate3d(-1, 0.8, 0.1, -50deg);
  animation: right-wing 0.2s ease-in 0s infinite alternate;
}
.bat > span {
  width: 12%;
  height: 100%;
  background-position: 50% 0;
}

@keyframes bat {
  0% {
    transform: translatey(10px);
  }
  100% {
    transform: translatey(0px);
  }
}
@keyframes left-wing {
  0% {
    transform: rotate3d(1, 0.8, 0.1, 50deg);
  }
  100% {
    transform: rotate3d(-1, -0.3, -0.1, 35deg);
  }
}
@keyframes right-wing {
  0% {
    transform: rotate3d(-1, 0.8, 0.1, -50deg);
  }
  100% {
    transform: rotate3d(1, -0.3, -0.1, -35deg);
  }
}