CSS3 transitionプロパティでアニメーションを実装する

CSS3のtransitionプロパティは、要素に設定したCSSプロパティが古い状態から新しい状態へ変化する際の動作を規定します。変化にかかる時間や途中段階での速度を指定することにより、アニメーション効果を実現します。

transitionプロパティは、JavaScriptやanimationプロパティのような複雑なアニメーションはできませんが、CSSだけでシンプルな効果を実装するには有効な手法です。

【コンテンツ】

  1. 仕様策定の動向とブラウザの対応状況
  2. 4つのtransitionプロパティ
  3. アニメーションサンプル(7例)

仕様策定の動向とブラウザの対応状況

W3Cで策定しているtransitionの仕様は、「CSS Transitions」に記述されています。

記事執筆時点での最新仕様は、2013年11月19日付けの作業草案(Working Draft)です。
http://www.w3.org/TR/2013/WD-css3-transitions-20131119/

主要ブラウザの最新バージョンはすべて対応しています。
Safari 6以下、iOS Safari 6.1以下、Androidブラウザ 4.3以下は、ベンダープレフィックス「-webkit-」が必要です。
IE9以下は非対応です。

4つのtransitionプロパティ

transitionには以下の4つのプロパティが存在します。
また4つのプロパティをまとめたショートハンドの 'transition' プロパティでも記述できます。

プロパティ 説明
transition-property transitionを適用するCSSプロパティの名前を指定します。
transition-duration transitionの開始から終了までにかける時間を指定します。
transition-timing-function transitionの間、どのように状態を変化させるかを指定します。
transition-delay transition開始までの待ち時間を指定します。

transition-property

ここに指定したCSSプロパティが、transitionによりアニメーションします。
CSSプロパティは、カンマ(,)で区切り複数指定できます。
指定を省略した場合は、すべてのプロパティが対象となります。

どのCSSプロパティにアニメーションを適用できるかは、以下の文書を参照してください。
http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#animatable-css

【記述例】

#transition {
   transition-property: opacity, left;
}

transition-duration

ここに指定した時間をかけて、transitionが実行されます。
デフォルト値は '0s' になります。

【記述例】

#transition {
   transition-duration: 2.5s;
}

なお、transition-propertyに指定した数より、transition-durationに指定した数が少ない場合は、transition-propertyに合うように値が繰り返されます。

例えば、以下のように記述されていたとします。

#transition {
   transition-property: opacity, left, top, width;
   transition-duration: 2.5s, 1s;
}

これは以下と同じになります。

#transition {
   transition-property: opacity, left, top, width;
   transition-duration: 2.5s, 1s, 2.5s, 1s;
}

逆にtransition-durationに指定した数が多い場合は切り捨てられます。
この繰り返しと切り捨てのルールは、他のtransitionプロパティでも同様に適用されます。

transition-timing-function

ここに指定した値で、transitionの間どのようにCSSプロパティの状態が変化するか決まります。具体的には、transitionの中間状態におけるプロパティの値の計算方法を定義することになります。

値は機能を示すキーワードか関数で指定します。
キーワードには、linear,ease,ease-in,ease-out,ease-in-out,step-start,step-endがあります。関数には、steps()とcubic-bezier()があります。
デフォルト値は 'ease' になります。

キーワードの意味としては、'linear'では一定のスピードの変化で、'ease'はスピードが緩慢になるイメージです。どのような変化になるかをつかむには、それぞれ試してみてください。

【記述例】

#transition {
   transition-timing-function: ease-in-out, cubic-bezier(0.2, 0.3, 0.7, 0.8);
}

transition-delay

ここに指定した時間経過後にtransitionが開始されます。
デフォルト値は '0s' になります。

【記述例】

#transition {
   transition-delay: 2s, 3s;
}

transition (ショートハンド)

4つのプロパティの値をまとめて指定するショートハンドも用意されています。
値はスペースで区切って指定します。
カンマ(,)で区切って複数のCSSプロパティに対する指定もできます。

【記述例】

#transition {
   transition: background-color ease-out 2s 1s, font-size 3s;
}

transition-duration と transition-delay は、同じように秒単位の値を指定しますが、最初の値は transition-duration に適用されます。

アニメーションサンプル(7例)

それでは実際に、このWebページ上でアニメーション動作を確認できるサンプルを示しながら解説しましょう。

サンプル画像やテキストにマウスオーバーさせるとtransitionが開始されます。
タッチデバイスで見ている方はタップしてください。

なお閲覧環境によっては動作がぎこちなかったり、全く動作しない可能性もありますのでご了承ください。最新のChromeとIEでは動作確認しました。

カメの移動

単純に「margin-left」の値を変えて、移動するように見せています。

移動するカメの絵

HTMLとCSSコードは以下になります。

メニューの背景色と文字色変更

マウスオーバーすると背景色が変わるメニューはよくありますが、transitionを使って切り替えに若干時間がかかるようにしています。

HTMLとCSSコードは以下になります。

マウスオーバーしたメニュー項目を拡大

マウスオーバーした項目を、CSS3のtransformプロパティで拡大しています。

HTMLとCSSコードは以下になります。

テキストカラーの変更とテキストシャドウ付加

transitionはテキストに対しても有効です。
CSS3のtext-shadowプロパティを使って影をつけてみました。

テキストハイライト

HTMLとCSSコードは以下になります。

写真を浮かび上がらせる

opacityプロパティをコントロールして、写真が浮かび上がるようにしました。

水着のモデル写真

HTMLとCSSコードは以下になります。

要素の回転・拡大・移動

CSS3のtransformプロパティをフル活用して、アイコン画像が回転しながら拡大・移動します。

アテンションマーク

HTMLとCSSコードは以下になります。

飛行機の離陸

飛行機が離陸するところを表現してみました。
こちらもCSS3のtransformプロパティを利用しています。

飛行機の絵

HTMLとCSSコードは以下になります。

いかがでしたか? JavaScript を使わなくても、CSS3 transitionだけでここまでアニメーションが可能です。
CSS3には他に「animationプロパティ」というのも用意されていますので、また別の記事で紹介します。

スポンサーリンク

ページの先頭へ