ホーム > ブログ > コーディングTips > cssでよく使う transitionをまとめてみた

cssでよく使う transitionをまとめてみた

2015.04.11

こんにちは、銀ねこどすえ。
cssのtransitionって便利ですよね!ワタクシ、おつむが弱いので使い方をすぐ忘れます。なのでやり方をまとめてみました。

transitionの基本

transitionはtransition効果(時間的変化)で4つの値を指定できます。>

  • transition-property…効果を適用するCSSプロパティ値(初期値…none)
  • transition-duration…変化に掛かる時間(初期値…0)
  • transition-timing-function…変化のタイミング・進行割合(初期値…ease)
  • transition-delay…変化の開始値(初期値…0)

IEやFireFoxなどここにcssの設定をしてあげた方が安全なので、以下のようにショートハンドでまとめて指定することをお勧めします。

  1. transition:transition-propertyの値 transition-durationの値 transition-timing-functionの値 transition-delayの値;

例えば、マウスオーバーしたら1秒で四角い黒から丸い青に変えるサンプルのソースだとこんな感じです。
初期値は以下の通りです。

transition-propertyと、transition-delay初期値を利用して省きます。背景と、角丸の指定を時間をかけて変更しているだけですがこんな感じ。 

  1. css
  2. #trasition_sample{
  3. background:#000000;
  4. height:200px;
  5. width:200px;
  6. transition:1s ease;
  7. }
  8. #trasition_sample:hover{
  9. background:#30c2c7;
  10. border-radius:50%;
  11. }
  12.  
  13. html
  14. <div id="trasition_sample"></div>

変化のタイミング値

時間経過のタイミングは自分でも設定可能ですが、以下の5つの定義済みのタイミング値があります。
サンプルではパッと見大差はありませんが、以下の違いがあります。

  • ease…ease-in-outに似ている。 開始時はより急速に加速して、中盤付近から緩やか。
  • linear…初期状態から最終状態へ規則的に、一定の速度で変化
  • ease-in… 始めは緩やか。次第に加速していき、最終状態に達するとアニメーションは突然停止する。
  • ease-out…急速に始まり、最終状態にかけて次第に緩やかになる。
  • ease-in-out…緩やかに始まり、最終状態に達するときにはそれまでよりも加速が緩やかになる。
ease linear ease-in ease-out ease-in-out

変化にかかる時間

これは言うまでもありませんね。単位は1秒なので1sといった感じです。

0.2s 0.5s 1s

変化の開始値

アニメーションの開始時間の指定です。単位は変化にかかる時間(transition-duration)と同じです。
マウスを乗っけて各秒数待ってみてください。 

1s 0.5s

効果を適応するcssプロパティ値

あまり使いませんが、背景と、サイズに別々の効果を入れたいときなどに使うのかなーと。
とりあえず背景と、形の変化スピードに違いを付けてみました。 

2s/0.5s

クロスブラウザー問題(特にIE)

ご存知の通り、IE10以降しかこのtransition使えません。
IE9以前は切り捨てるか悩みどころ…。最近ではIE8以上でOKのところが多いので、切り替わるのを待つか、jsで乗り切るかと思ってちょっと作ってみたもののできることがかなり限られているという…。

しかもjQueryのanimate()はbackgroundなど色をサポートしてないので別途プラグインが必要などめんどっちい。

  1. transition:;
  2. -moz-transition:;
  3. -webkit-transition:;
  4. -o-transition:;
  5. -ms-transition:;

まとめ

transitionは使い勝手良いので今後はtransformとかも一緒に使ってみたいと思います。

この記事のタグ