CSS3 Transitionでアニメーションごとにスピードとイージングを変える

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
css3-transition-duration-controlling-thumb

CSS3のTransitionを使えばjQueryなどを使わなくても簡単に、かつ高速にアニメーションができる。

しかし、まれに行きと帰りでアニメーションの速度を調整したいことがある。たとえばアコーディオンを開くときはすばやく、閉じるときは少し遅く、などである。

これをCSS3のTransitionで実現するにはtransitionを設定したセレクタそれぞれにdurationとtiming-functionを指定すればよい

スポンサーリンク

動作例

早速、例を示す。

▼の青い部分をクリックすると、1回目は160pxに0.5秒で拡がる。
さらに2回目のクリックでは320pxに2秒で拡がり、3回目で5秒かけて元に戻る。

実際のソースコード

この処理に必要なソースコードを示す。

HTML

HTMLはtestという名前のdivを一つだけ用意。

JavaScript

jQueryをベースとし、addClassやremoveClassでCSSセレクタの付け外しを行なっている。

CSS3

なお、下記のソースには(スマホ対応のため)WebKit(SafariやChrome)しか含んでいないので、他のブラウザにも対応させる場合は、適宜その他のベンダープリフィックスのものを追加してほしい。(-webkit-transition-timing-function → –moz-transition-timing-functionなど)

解説

青いdivをクリックする度にアニメーションが次に進む。動きは次のようになる。

クラスごとにdurationやfunctionを設定すれば、速度や関数の変更ができる

アニメーション完了までの時間はtransition-duration、タイミング関数はtransition-timing-functionで設定できる。

初期状態→tr1→tr2はease(=緩和。最初と最後がゆっくりになる)関数、tr2→linear関数(=線形。常に等速度)にしてみた。

これらのクラスごとの設定を使えばCSS3 Animationを使わず、Transitionでもそれなりのアニメーションができそうだ。

なお、イージング(タイミング)関数に関しては下記のサイトなどが参考になる。
transition-timing-function – CSS3リファレンス

最後までお読みいただきありがとうございました m(_ _)m

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存