/*--------------------------------------------------------------
  基本のスタイル
--------------------------------------------------------------*/
/*==================================
  左から右へ
==================================*/
.left-delighter {
  transition: all .3s ease-out;
  transform: translateX(-100%);
  opacity: 0;
}

/*==================================
  右から左へ
==================================*/
.right-delighter {
  transition: all .3s ease-out;
  transform: translateX(100%);
  opacity: 0;
}

/*==================================
  下から上へ
==================================*/
.down-delighter {
  transition: all .3s ease-out;
  transform: translatey(100%);
  opacity: 0;
}

/*--------------------------------------------------------------
  スタート時のスタイル
--------------------------------------------------------------*/
/*==================================
  左から右へ
==================================*/
.left-delighter.started {
  transform: none;
  opacity: 1;
}

/*==================================
  右から左へ
==================================*/
.right-delighter.started {
  transform: none;
  opacity: 1;
}

/*==================================
  下から上へ
==================================*/
.down-delighter.started {
  transform: none;
  opacity: 1;
}

/*--------------------------------------------------------------
  エンド時のスタイル
--------------------------------------------------------------*/
.foo.delighter.started.ended {

}