/* 基本のスタイル 下から */
   .foo.delighter {
      transition: all .8s ease-out;
      transform: translatey(100%);
      opacity: 0;
   }

/* スタート時のスタイル */
   .foo.delighter.started {
      transform: none;
      opacity: 1;
   }

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

   }






/* 基本のスタイル　横から */
   .foo2.delighter {
      transition: all .8s ease-out;
      transform: translateX(50%);
      opacity: 0;
   }

/* スタート時のスタイル */
   .foo2.delighter.started {
      transform: none;
      opacity: 1;
   }

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

   }



/* 基本のスタイル　横から */
   .foo3.delighter {
      transition: all .8s ease-out;
      transform: translateX(-50%);
      opacity: 0;
   }

/* スタート時のスタイル */
   .foo3.delighter.started {
      transform: none;
      opacity: 1;
   }

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

   }