CSS3 Transitionでアニメーションごとにスピードとイージングを変える
CSS3のTransitionを使えばjQueryなどを使わなくても簡単に、かつ高速にアニメーションができる。
しかし、まれに行きと帰りでアニメーションの速度を調整したいことがある。たとえばアコーディオンを開くときはすばやく、閉じるときは少し遅く、などである。
これをCSS3のTransitionで実現するにはtransitionを設定したセレクタそれぞれにdurationとtiming-functionを指定すればよい。
スポンサーリンク
動作例
早速、例を示す。
▼の青い部分をクリックすると、1回目は160pxに0.5秒で拡がる。
さらに2回目のクリックでは320pxに2秒で拡がり、3回目で5秒かけて元に戻る。
実際のソースコード
この処理に必要なソースコードを示す。
HTML
HTMLはtestという名前のdivを一つだけ用意。
|
1 |
<div id="test"></div> |
JavaScript
jQueryをベースとし、addClassやremoveClassでCSSセレクタの付け外しを行なっている。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function(){ $("#test").click(function() { if ($(this).hasClass("tr1")) { // tr1 -> tr2 $(this).removeClass("tr1"); $(this).addClass("tr2"); } else if ($(this).hasClass("tr2")) { // tr2 -> 初期状態 $(this).removeClass("tr2"); } else { // 初期状態 -> tr1 $(this).addClass("tr1"); } }); }); |
CSS3
なお、下記のソースには（スマホ対応のため）WebKit（SafariやChrome）しか含んでいないので、他のブラウザにも対応させる場合は、適宜その他のベンダープリフィックスのものを追加してほしい。（-webkit-transition-timing-function → –moz-transition-timing-functionなど）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
#test { background:blue; width:80px; height:50px; -webkit-transition-duration:5s; -webkit-transition-timing-function:linear; } #test.tr1 { width:160px; -webkit-transition-duration:0.5s; -webkit-transition-timing-function:ease; } #test.tr2 { width:320px; -webkit-transition-duration:2s; -webkit-transition-timing-function:ease; } |
解説
青いdivをクリックする度にアニメーションが次に進む。動きは次のようになる。
クラスごとにdurationやfunctionを設定すれば、速度や関数の変更ができる
アニメーション完了までの時間はtransition-duration、タイミング関数はtransition-timing-functionで設定できる。
初期状態→tr1→tr2はease（＝緩和。最初と最後がゆっくりになる）関数、tr2→linear関数（＝線形。常に等速度）にしてみた。
これらのクラスごとの設定を使えばCSS3 Animationを使わず、Transitionでもそれなりのアニメーションができそうだ。
なお、イージング（タイミング）関数に関しては下記のサイトなどが参考になる。
transition-timing-function – CSS3リファレンス
最後までお読みいただきありがとうございました m(_ _)m
スポンサーリンク
関連記事
