.bird {
  position: absolute;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  top: 2vh; /* アニメーション開始位置に合わせる */
  left: -5vw; /* アニメーション開始位置に合わせる */
  animation: moving linear infinite; /* JavaScriptでanimation-durationを設定 */
  animation-fill-mode: forwards;
}

.bird.-type_2 {
  animation-delay: 1s;
}
.bird.-type_2:before,
.bird.-type_2:after {
  animation-delay: -2s;
}

.bird.-type_3 {
  animation-delay: 3s;
}
.bird.-type_3:before,
.bird.-type_3:after {
  animation-delay: -1s;
}

.bird.-type_4 {
  animation-delay: 6s;
}
.bird.-type_4:before,
.bird.-type_4:after {
  animation-delay: 4s;
}

@keyframes moving {
  0% {
      top: 2vh; /* 開始位置 */
      left: -5vw; /* 左端の外側 */
  }
  25% {
      top: 7vh; /* 中間で少し上下に移動 */
      left: 23vw; /* 画面中央寄り */
  }
  80% {
      top: 3vh; /* 終了位置 */
      left: 110vw; /* 右端の外側 */
  }
  100% {
      top: 3vh; /* 終了位置 */
      left: 110vw; /* 右端の外側 */
  }
}

.bird:before, .bird:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: black; /* デフォルトは黒い鳥 */
  transform: rotate(-30deg);
  transform-origin: right bottom;
}

.bird:before {
  width: 100%;
  height: 1px;
  animation: leftWing 8s linear infinite;
}
.bird:after {
  width: 1px;
  height: 100%;
  animation: rightWing 8s linear infinite;
}

/* 白い鳥 */
.bird.white:before, .bird.white:after {
  background-color: white;
}

/* 黒い鳥 */
.bird.black:before, .bird.black:after {
  background-color: black;
}

@keyframes leftWing {
  0%   { transform: rotate(-30deg); }
  2%   { transform: rotate(-110deg); }
  4%   { transform: rotate(-30deg); }
  6%   { transform: rotate(-110deg); }
  8%   { transform: rotate(-30deg); }
  10%  { transform: rotate(-110deg); }
  12%  { transform: rotate(-30deg); }
  30%  { transform: rotate(-30deg); }
  42%  { transform: rotate(-35deg); }
  72%  { transform: rotate(-35deg); }
  74%  { transform: rotate(10deg); }
  76%  { transform: rotate(-30deg); }
  78%  { transform: rotate(-110deg); }
  80%  { transform: rotate(-30deg); }
  82%  { transform: rotate(-110deg); }
  84%  { transform: rotate(-30deg); }
  86%  { transform: rotate(-110deg); }
  88%  { transform: rotate(-30deg); }
  90%  { transform: rotate(-110deg); }
  92%  { transform: rotate(-30deg); }
  94%  { transform: rotate(-110deg); }
  96%  { transform: rotate(-30deg); }
  98%  { transform: rotate(-110deg); }
  100% { transform: rotate(-30deg); }
}

@keyframes rightWing {
  0%   { transform: rotate(30deg); }
  2%   { transform: rotate(110deg); }
  4%   { transform: rotate(30deg); }
  6%   { transform: rotate(110deg); }
  8%   { transform: rotate(30deg); }
  10%  { transform: rotate(110deg); }
  12%  { transform: rotate(30deg); }
  30%  { transform: rotate(30deg); }
  42%  { transform: rotate(35deg); }
  72%  { transform: rotate(35deg); }
  74%  { transform: rotate(0deg); }
  76%  { transform: rotate(30deg); }
  78%  { transform: rotate(110deg); }
  80%  { transform: rotate(30deg); }
  82%  { transform: rotate(110deg); }
  84%  { transform: rotate(30deg); }
  86%  { transform: rotate(110deg); }
  88%  { transform: rotate(30deg); }
  90%  { transform: rotate(110deg); }
  92%  { transform: rotate(30deg); }
  94%  { transform: rotate(110deg); }
  96%  { transform: rotate(30deg); }
  98%  { transform: rotate(110deg); }
  100% { transform: rotate(30deg); }
}