アニメーションを試してみました。
これは、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"> テキストアニメーション１ </div> <div class="slide slide2"> テキストアニメーション２ </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は１秒を
表しています。これが、500msになると、500ミリ秒になります。
動きを見ていると、animation-durationはまだ使えなくて、ベンダープレフィックスが
必要なようです。
-webkit-animation-delayは、アニメーションを開始するまでの待ち時間です。
時間の指定方法はanimation-durationと同じです。
これをChromeで動かすと、左から200pxから-200pxまで移動するアニメーションが
表示されます。端まで移動した後も止まらずアニメーションします。
おもしろいなと思ったのですが、授業では使えそうにないな…。
「Chromeでしか動かない」と言っても、IEやFirefoxで動かしたりするし…。
0 件のコメント:
コメントを投稿