/* 弾痕が表示されるときのアニメーション */
@keyframes bullet {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* 弾痕のスタイル。適宜アップデート */
.bullet-hole {
  position: absolute;
  width: 30%;
  opacity: 0;
}
.bullet-hole img {
  width: 100%;
}

/* 送信されたら -shot クラスが付与される */
.bullet-hole.-shot {
  animation: bullet 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    fadeIn 0.2s ease forwards;
}

/* １個目の弾痕 */
.bullet-hole:nth-child(1) {
  animation-delay: 0.5s;
  top: 10%;
  left: 12%;
}

/* １個目の弾痕 */
.bullet-hole:nth-child(2) {
  animation-delay: 1.0s;
  top: 30%;
  left: 30%;
}

/* １個目の弾痕 */
.bullet-hole:nth-child(3) {
  animation-delay: 1.5s;
  top: 20%;
  right: 15%;
}