.slide {
    position   : relative;
                      /* 画像のサイズに合わせて変更ください */
    width      : 100%;
    
    margin     : auto;      /* サンプルは中央寄せの背景：白 */
    background : #fff;
  }
   
   /*=== 画像の設定 ======================================= */
  .slide img {
    display    : block;
    position   : absolute;
                        /* 画像のサイズを表示エリアに合せる */
    width      : inherit;
    height     : inherit;
    opacity    : 0;
    animation  : slideAnime 5s ease infinite;

  }
   
   /*=== スライドのアニメーションを段差で開始する ========= */
  .slide img:nth-of-type(1) { animation-delay: 0s }
  .slide img:nth-of-type(2) { animation-delay: 5s }
  .slide img:nth-of-type(3) { animation-delay: 10s }  
   /*=== スライドのアニメーション ========================= */


   @keyframes slideAnime {
  
    0% {
      opacity: 0; transform: scale(1.0);
      }

      100% {
        opacity: 1; transform: scale(1.0);
      }


  
}


/*
@keyframes slideAnime {
  0% {
    transform: translateX(0);
    }
    33% {
    transform: translateX(-300px);
    }
    66% {
    transform: translateX(-600px);
    }
    100% {
    transform: translateX(0);
    }
  }

  */