CSS3のanimationを使ったWebKit系対応の画像スライドの作り方

こういうのを何と呼べばいいのかよく分からなかったので、皆さんがイメージしているものと違ったらごめんなさい。

今回は別サーバーにサンプルを用意しました。

HTMLは非常にシンプルです。

<div id="img-slide">
  <a href="#"><img src="img1.png" id="img1" /></a>
  <a href="#"><img src="img2.png" id="img2" /></a>
  <a href="#"><img src="img3.png" id="img3" /></a>
  <a href="#"><img src="img4.png" id="img4" /></a>
</div>

こういうのはリストで並べたほうがスマートなのかなと思いつつ、とりあえず画像を順に置いただけにしています。

続いてCSS。背景に黒めの画像を使っているので、画像のbox-shadowを強めに付けています。背景が白だときつすぎるかもしれないです。

#img-slide {
  width: 980px;
  margin:50px auto;
  position: relative;
}
#img-slide a img {
  position: absolute;
  box-shadow: 0px 5px 15px rgba(0,0,0,0.7), 20px 10px 30px rgba(0,0,0,0.7), -20px 10px 30px rgba(0,0,0,0.7);
  border: 0;
}
#img1 {
  -webkit-animation: 'slide' 16s ease 0s infinite normal
}
#img2 {
  -webkit-animation: 'slide' 16s ease -4s infinite normal
}
#img3 {
  -webkit-animation: 'slide' 16s ease -8s infinite normal
}
#img4 {
  -webkit-animation: 'slide' 16s ease -12s infinite normal
}
@-webkit-keyframes 'slide' {
  0% { top: 20px; left: 200px; width: 580px; z-index: 4; }
 20% { top: 20px; left: 200px; width: 580px; z-index: 4; }
 25% { top: 50px; left: 480px; width: 500px; z-index: 3; }
 45% { top: 50px; left: 480px; width: 500px; z-index: 3; }
 50% { top: 50px; left: 200px; width: 500px; z-index: 1; }
 70% { top: 50px; left: 200px; width: 500px; z-index: 1; }
 75% { top: 50px; left:   0px; width: 500px; z-index: 3; }
 95% { top: 50px; left:   0px; width: 500px; z-index: 3; }
100% { top: 20px; left: 200px; width: 580px; z-index: 4; }
}

animation以外は特に問題ないかなと思います。で、そのanimationを簡単に説明してみます。

個別に指定するプロパティもありますが、今回はまとめて指定しています。けど、まとめて指定できるのはWebKit系のみです。あと、現時点ではベンダープレフィックス「-webkit-」が必要です。

これだけだと「slide」というアニメーションの内容が分からないので、別でその内容を指定します。

@-webkit-keyframes 'slide' {
  0% { top: 20px; left: 200px; width: 580px; z-index: 4; }  /*真ん中*/
 20% { top: 20px; left: 200px; width: 580px; z-index: 4; }  /*真ん中*/
 25% { top: 50px; left: 480px; width: 500px; z-index: 3; }  /*右側*/
 45% { top: 50px; left: 480px; width: 500px; z-index: 3; }  /*右側*/
 50% { top: 50px; left: 200px; width: 500px; z-index: 1; }  /*裏側*/
 70% { top: 50px; left: 200px; width: 500px; z-index: 1; }  /*裏側*/
 75% { top: 50px; left:   0px; width: 500px; z-index: 3; }  /*左側*/
 95% { top: 50px; left:   0px; width: 500px; z-index: 3; }  /*左側*/
100% { top: 20px; left: 200px; width: 580px; z-index: 4; }  /*真ん中*/
}

0%から100%までの動きを順に指定し、それがアニメーション名「slide」ということになります。今回のサンプルの場合、これを16秒かけて一周します。

ということで簡単に説明してみました。WebKit系のみということでまだまだ実用的ではありませんがお役に立てばと思います。

とはいうものの、オンマウス時の動きはこだわれそうですし、画像も4つしか使えないですし、まだまだ改良の余地はたくさんありますので今後も勉強していきたいです。