CSSのanimationプロパティで簡易スライドショーを作ってみた

先日の土曜日に、Sugamo.cssに参加しました。

いろんなことが勉強できたんですけど、CSSアニメーションが結構面白いなーと思ったのでデモを作ってみました。

animationプロパティは、一応モジュールの中にあるので、うまくいけばすべてのブラウザで使えるようになる可能性は0ではありません。

CSS Animations

Canvas + HTML5でもアニメーションが作れたりしますが、一度作ってみた時に、消して書いて消して書いての連続で、これでアニメーション作るのは難しいだろうと感じていましたが、CSSのanimationプロパティは一定時間までに◯◯をするみたいな感じでアニメーションが書けるので、結構簡単で実用性があるように気がしました。

コードサンプル

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>animation</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    #img1 {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -157.5px;
      margin-left: -157.5px;
      opacity: 0;
      -webkit-animation: fadeInAndOut 5s ease;
    }
    #img2 {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -157.5px;
      margin-left: -157.5px;
      opacity: 0;
      -webkit-animation: fadeInAndOut 5s ease 5s;
    }
    #img3 {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -157.5px;
      margin-left: -157.5px;
      opacity: 0;
      -webkit-animation: fadeInAndOut 5s ease 10s;
    }
    #img4 {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -157.5px;
      margin-left: -157.5px;
      opacity: 1;
      -webkit-animation: lastfadeIn 20s;
    }
    @-webkit-keyframes fadeInAndOut {
      from {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      to {
        opacity: 0;
      }
    }
    @-webkit-keyframes lastfadeIn {
      from {
        opacity: 0;
      }
      75% { /* 20s * 0.75 (75%) = 15s */
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
  </style>
</head>
<body>
  <img src="http://d.hatena.ne.jp/jdg/files/avatarimage.jpg?d=y" id="img1">
  <img src="http://d.hatena.ne.jp/jdg/files/avatarimage.jpg?d=y" id="img2">
  <img src="http://d.hatena.ne.jp/jdg/files/avatarimage.jpg?d=y" id="img3">
  <img src="http://d.hatena.ne.jp/jdg/files/avatarimage.jpg?d=y" id="img4">
</body>
</html>

今回のサンプルはSafari, Chromeにしか対応してませんので、それでご確認ください。

keyframesという@ルールの中で、アニメーションを定義できます。fromは開始時、toは終了時、その間の%は全体の時間のうち、その時間に差し掛かった時の状態を書きます。

fadeInAndOutというアニメーションはいいとして、lastfadeInはちょっと強引なのが気になるところですが、なんかうまい方法あるのかな？そもそもdelayで待ち時間を作って実行しているんですけど（animationプロパティの3つ目の値）、そもそもdelay使わずに上手くやれたりするのかも。

ただ、簡易なアニメーションはこれで作れるということがわかりました。