Tweetカテゴリ:CSSタグ:アニメーションtransitionCSSこのブログでもひっそりと使っているCSSでのanimation。これも毎回調べたりしつつ使っているので、勉強したことを書きだしておきます。今回はその中でもtransitionを使ってアニメーションをみてみようと思います。webkitとOpera、Firefox4で動作2011年1月現在、CSS3のアニメーションが動作するのはwebkitのSafariとChrome、それとOperaとFirefox4で動作します(IE未確認)。それぞれのブラウザでベンダープレフィックス(接頭語)がないと動作しません。デモをまずは簡単に、ブロックが大きくなるデモから。color:#000000;}divに:hoverをつけておりますので、IEの一部はこれすら動作しないです。初期では、背景が青系色、横幅が150px、高さ100px、テキストは白。今回のデモでは、:hoverを指定しているので、その要素の上にマウスを乗せるとアニメーションが動作します。変化後は背景がピンク、幅450px、高さ200px、テキストが黒に変化します。■デモそれぞれのブラウザに合わせたボタンを押してプレフィックスを変更した後に、青い四角の上にマウスを乗せてみてください。プレフィックスをつけるボタンを押さないと動きませんし、対応ブラウザではなければアニメーションで動作しません。青い四角の上にマウスをのせずとも、若干角度が変わります。アニメーションが動かない環境であれば、すぐに大きさと色が変わりますが、アニメーションが有効になれば、1秒の速さでアニメーションしながら:hoverに指定した値に変化します。0s;}-moz--webkit--o-このブロックにマウスをのせてね(:hoverで下の四角が伸びます)さて、各プロパティをそれぞれみていきましょう。transition-propertytransitionを適用するプロパティ(アニメーションをさせるプロパティ)を設定します。background-colorやcolorなどの要素を設定しておくことで、指定した要素がアニメーションするようになります。このプロパティを書いた際は、指定した部分の要素だけが動くようになります。自分はこのプロパティを書いて、要素を指定し忘れて「あれ?動かないよ!?」と慌ててしまうことが多いです。ちなみに、変化させられる要素は下記の通りになります。CSS一部はブラウザによってはうまく動作しないとかも?まだ未検証なので、いろいろ試してみたいと思います。その1:hoverで要素を半透明にします。Opacityこれをpositionや背景などと組み合わせたらロールオーバーとかも可能ですね。その2positionで要素を二つ重ねて、:hoverで上の要素をopacityで消します。■positionデモ:hoverで要素が左から右に移動します。Lefttransition-durationtransitionの変化の時間を指定します。このプロパティがないとtransitionが動作しません。値は0.5sや1sなど、sという単位で指定します。値が大きいほどゆっくり変化し、値が小さいほど早く変化します。■時間デモ下のエリアにマウスを乗せると中にある2つのブロックが横に伸びます。上が0.5秒で、下が5秒かけてアニメーションします。マウスをのせてね(:hoverで動作)0.5s5sゆっくりアニメーションさせたい時は数値を大きくしてみてください。■時間デモ2上のデモでは横に伸ばしてみましたが、左から右への移動でも時間指定による変化を見てみましょうマウスをのせてね(:hoverで動作)0s1s2s3s4s5s0秒から5秒まで、1秒刻みでブロックを用意し動かしてみました。0秒はアニメーションせず移動するようです。