【CSS】イメージスライダー、アニメーションをアレンジしていろいろ表現してみる

参考

基本のHTMLとCSSは以下を参照してください。

【javascript】イメージスライダー(image slider)の作り方

CSS

左へスライド

  .slider .images img.active {
    animation: slider 3s ease-in-out infinite;
    z-index: 100;
  }
  @keyframes slider {
    50%,100% {
      transform: translateX(-100%);  /* ここがポイント */
    }
  } 

右へスライド

  .slider .images img.active {
    animation: slider 3s ease-in-out infinite;
    z-index: 100;
  }
  @keyframes slider {
    50%,100% {
      transform: translateX(100%);  /* ここがポイント */
    }
  } 

回転して縮小、消える

  .slider3 .images img.active {
    animation: slider3 3s ease-in-out infinite;
    z-index: 100;
  }
  @keyframes slider3 {
    0% {
      transform: scale(1.2);
    }
    30%,100%{
      transform: scale(0) rotate(720deg);  /* ここがポイント */
    }
  }  

skewを使い、縮小、消える

  .slider4 .images img.active {
    animation: slider4 3s ease-in-out infinite;
    z-index: 100;
  }
  @keyframes slider4 {
    0% {
      transform: scale(1.2);
    }
    30%,100%{
      transform: scale(0) skew(90deg);  /* ここがポイント */
    }
  }