2012年2月10日金曜日

CSS3でアニメーションさせる。

今日はPHPの授業で作れそうなものを探している途中に、
アニメーションを試してみました。
これは、Chromeだと動きますが、Firefox(10でも確認しましたが)だと動かないようです。

@keyframesの設定と、-webkit-animation-nameを指定することで、
スタイルを指定したElementがアニメーション
するようになります。

サンプルコードです。
sample.html
<!DOCTYPE html>
<html>
  <head>
 <meta charset="UTF-8" />
 <title>テキストアニメーション</title>
 <link rel="stylesheet" href="style.css" />
  </head>
<body>
  <h1>テキストアニメーション</h1>
  <div class="slide slide1">
 テキストアニメーション1
  </div>
  <div class="slide slide2">
 テキストアニメーション2
  </div>
</body>
</html>

style.css
.slide1 {
    position: relative;
    -webkit-animation-name: "slide";
    animation-name: "slide";

    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}

.slide2 {
    position: relative;
    -webkit-animation-name: "slide";
    animation-name: "slide";

    -webkit-animation-delay: 200ms;
    animation-delay: 200ms;

    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}

@-webkit-keyframes "slide" { 
    from {
        left: 200px;
    }
    to { 
        left: -200px;
    }
}

今回のポイントは、@-webkit-keyframesです。
この属性は、要素のアニメーションの動き方を指定します。
fromが、開始位置、toが終了位置となります。

slide1、slide2両方とも、animation-name:"slide"が指定されていて、このanimation-nameで指定した名前のkeyframesでアニメーションされます。

animation-durationはアニメーションが始まって、終わるまでの時間です。1sは1秒を
表しています。これが、500msになると、500ミリ秒になります。
動きを見ていると、animation-durationはまだ使えなくて、ベンダープレフィックスが
必要なようです。

-webkit-animation-delayは、アニメーションを開始するまでの待ち時間です。
時間の指定方法はanimation-durationと同じです。

これをChromeで動かすと、左から200pxから-200pxまで移動するアニメーションが
表示されます。端まで移動した後も止まらずアニメーションします。

おもしろいなと思ったのですが、授業では使えそうにないな…。
「Chromeでしか動かない」と言っても、IEやFirefoxで動かしたりするし…。