/* ===================================================================
// CSS information
//
// file name : scrollView.css
// style info : 要素をふわっと表示させる動きを定義したファイル
//
//
// ===================================================================

/*=================================================
 * 要素をふわふわさせる
 * ================================================ */
.updown {
   animation-name: updown1;   /* アニメーション名の指定 */
   animation-delay:0s;   /* アニメーションの開始時間指定 */
   animation-duration: 8s;   /* アニメーション動作時間の指定 */
   animation-timing-function: ease-in-out;  /* アニメーションの動き指定（徐々に早く）*/
   animation-iteration-count: infinite; 
}

@keyframes updown1 {
 0% {
   transform: translateY(0);
 }
 50% {
   transform: translateY(-20px);
 }
 100% {
   transform: translateY(0);
 }
}


/*=================================================
 * 下から「ふわっ」と表示（scrollView.js）
 * ================================================ */
/* スタート時、要素自体を透過にするため */
 .fadeUpTrigger {
 	opacity: 0;
 }
 .fadebox {
   opacity: 0;
 }
 
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1.0s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  0% {
    opacity: 0;
	  transform: translateY(100px);
    transition-timing-function: ease-out;
  }
  
  50% {
    opacity: 1;
	  transform: translateY(-5px);
    transition-timing-function: ease-out;
  }

  100% {
    opacity: 1;
	  transform: translateY(0);
    transition-timing-function: ease-out;
  }
}


/*=================================================
 * 左から「ふわっ」と表示（scrollView.js）
 * ================================================ */
/* スタート時、要素自体を透過にするため */
.fadeleftTrigger {
 opacity: 0;
}

.fadeleft {
  animation-name: fadeleftAnime;
  animation-duration: 1.0s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeleftAnime {
  0% {
    opacity: 0;
	  transform: translateX(100px);
    transition-timing-function: ease-out;
  }
  
  50% {
    opacity: 1;
	  transform: translateX(-5px);
    transition-timing-function: ease-out;
  }

  100% {
    opacity: 1;
	  transform: translateX(0);
    transition-timing-function: ease-out;
  }
}


/*=================================================
 * 右から「ふわっ」と表示（scrollView.js）
 * ================================================ */
/* スタート時、要素自体を透過にするため */
.faderightTrigger {
 opacity: 0;
}

.faderight {
  animation-name: faderightAnime;
  animation-duration: 1.0s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes faderightAnime {
  0% {
    opacity: 0;
	  transform: translateX(-100px);
    transition-timing-function: ease-out;
  }
  
  50% {
    opacity: 1;
	  transform: translateX(5px);
    transition-timing-function: ease-out;
  }

  100% {
    opacity: 1;
	  transform: translateX(0);
    transition-timing-function: ease-out;
  }
}