.fade-in-left{ 
  opacity: 0;
  transform: translateX(-200px);
  transition: 3s ease;
}
.fade-in-right{ 
  opacity: 0;
  transform: translateY(+200px);
  transition: 3s ease;
}

.fade{

  animation-name: fadeIn;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;

}
@keyframes fadeIn { /*animation-nameで設定した値を書く*/

  0% {opacity: 0} /*アニメーション開始時は不透明度0%*/

  100% {opacity: 1} /*アニメーション終了時は不透明度100%*/

}