.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.target {
  animation: fuwafuwa01 2s infinite ease-in-out;
}

/* 縦のふわふわの動き */
@keyframes fuwafuwa01 {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
}

.blur {
  animation-name: blurAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }

  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}

.blurTrigger {
  opacity: 0;
}

/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.box {
  opacity: 0;
}

/*==================================================
動かしたい動き（今回は” ふわっ” を採用）
===================================*/

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1.9s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*　画像の縮小　*/

.zoomOut {
  /*hoverした時の変化*/
  transform: scale(1.2); /*拡大の値を変更したい場合はこの数値を変更*/
  transition: all 0.6s;
}