.scrollanime {
  /*ここで全体のアニメーション秒数を設定*/
  transition: all ease 1.5s;
  /*出現前は全て透明に*/
  opacity: 0;
}
/*classに応じて出現前の位置や大きさを設定*/
.toUp {
  transform: translateY(50px);
}
.toDown {
  transform: translateY(-50px);
}
.toLeft {
  transform: translateX(50px);
}
.toRight {
  transform: translateX(-50px);
}
.toBig {
  transform: scale(0.8);
}
/*画面に入った後は元の位置や大きさに戻る*/
.fadeIn.scrollanime {
  opacity: 1;
}
.fadeIn.toUp {
  transform: translateY(0);
}
.fadeIn.toDown {
  transform: translateY(0);
}
.fadeIn.toLeft {
  transform: translateX(0);
}
.fadeIn.toRight {
  transform: translateX(0);
}
.fadeIn.toBig {
  transform: scale(1);
}