CSS3 transitionプロパティでアニメーションを実装する
公開日：2014年9月11日
最終更新日：2019年4月6日
CSS3のtransitionプロパティは、要素に設定したCSSプロパティが古い状態から新しい状態へ変化する際の動作を規定します。変化にかかる時間や途中段階での速度を指定することにより、アニメーション効果を実現します。
transitionプロパティは、JavaScriptやanimationプロパティのような複雑なアニメーションはできませんが、CSSだけでシンプルな効果を実装するには有効な手法です。
【コンテンツ】
仕様策定の動向とブラウザの対応状況
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以下は非対応です。
４つのtransitionプロパティ
transitionには以下の４つのプロパティが存在します。
また４つのプロパティをまとめたショートハンドの '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 (ショートハンド)
４つのプロパティの値をまとめて指定するショートハンドも用意されています。
値はスペースで区切って指定します。
カンマ(,)で区切って複数のCSSプロパティに対する指定もできます。
【記述例】
#transition {
transition: background-color ease-out 2s 1s, font-size 3s;
}
transition-duration と transition-delay は、同じように秒単位の値を指定しますが、最初の値は transition-duration に適用されます。
アニメーションサンプル（７例）
それでは実際に、このWebページ上でアニメーション動作を確認できるサンプルを示しながら解説しましょう。
サンプル画像やテキストにマウスオーバーさせるとtransitionが開始されます。
タッチデバイスで見ている方はタップしてください。
なお閲覧環境によっては動作がぎこちなかったり、全く動作しない可能性もありますのでご了承ください。最新のChromeとIEでは動作確認しました。
カメの移動
単純に「margin-left」の値を変えて、移動するように見せています。
HTMLとCSSコードは以下になります。
|
1 2 3 |
<div class="tr-first"> <p><img src="img/turtle.png"></p> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.tr-first { width: 130px; margin-left: 10px; -webkit-transition-property: margin-left; -webkit-transition-duration: 3.5s; -webkit-transition-timing-function: linear; transition-property: margin-left; transition-duration: 3.5s; transition-timing-function: linear; } .tr-first:hover, .tr-first:active { margin-left: 400px; } |
メニューの背景色と文字色変更
マウスオーバーすると背景色が変わるメニューはよくありますが、transitionを使って切り替えに若干時間がかかるようにしています。
HTMLとCSSコードは以下になります。
|
1 2 3 4 5 6 |
<ul class="tr-second cf"> <li><a href="#non">ホーム</a></li> <li><a href="#non">製品紹介</a></li> <li><a href="#non">会社概要</a></li> <li><a href="#non">お問い合わせ</a></li> </ul> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.tr-second { text-align: center; } .tr-second li { float: left; width: 120px; height: 40px; border: 1px solid #fff; background-color: #ccc; line-height: 40px; -webkit-transition-duration: 1.5s; transition-duration: 1.5s; } .tr-second li:hover, .tr-second li:active { background-color: #069; } .tr-second li a { display: block; width: 100%; -webkit-transition-duration: 0.8s; transition-duration: 0.8s; } .tr-second a:hover, .tr-second a:active { color: #fff; } |
マウスオーバーしたメニュー項目を拡大
マウスオーバーした項目を、CSS3のtransformプロパティで拡大しています。
HTMLとCSSコードは以下になります。
|
1 2 3 4 5 6 |
<ul class="tr-third cf"> <li><a href="#non">ホーム</a></li> <li><a href="#non">製品紹介</a></li> <li><a href="#non">会社概要</a></li> <li><a href="#non">お問い合わせ</a></li> </ul> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.tr-third { text-align: center; } .tr-third li { float: left; width: 120px; height: 40px; border: 1px solid #fff; background-color: #ccc; line-height: 40px; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .tr-third li:hover, .tr-third li:active { -webkit-transform: scale(1.1); transform: scale(1.1); } .tr-third li a { display: block; width: 100%; } |
テキストカラーの変更とテキストシャドウ付加
transitionはテキストに対しても有効です。
CSS3のtext-shadowプロパティを使って影をつけてみました。
テキストハイライト
HTMLとCSSコードは以下になります。
|
1 |
<div class="tr-fourth"><p>テキストハイライト</p></div> |
|
1 2 3 4 5 6 7 8 9 10 11 |
.tr-fourth p { font-size: 24px; font-weight: bold; -webkit-transition-duration: 1.5s; transition-duration: 1.5s; } .tr-fourth p:hover, .tr-fourth p:active { color: red; text-shadow: 4px 4px 8px #777; } |
写真を浮かび上がらせる
opacityプロパティをコントロールして、写真が浮かび上がるようにしました。
HTMLとCSSコードは以下になります。
|
1 2 3 |
<div class="tr-fifth"> <p><img src="img/model.jpg"></p> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.tr-fifth { width: 300px; background:#9d826d; } .tr-fifth img { opacity: 0.02; -webkit-transition-duration: 5s; -webkit-transition-timing-function: ease-in; transition-duration: 5s; transition-timing-function: ease-in; } .tr-fifth img:hover, .tr-fifth img:active { opacity: 1; } |
要素の回転・拡大・移動
CSS3のtransformプロパティをフル活用して、アイコン画像が回転しながら拡大・移動します。
HTMLとCSSコードは以下になります。
|
1 2 3 |
<div class="tr-sixth"> <p><img src="img/new.gif"></p> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 |
.tr-sixth img { -webkit-transition: 2.5s ease-in-out; transition: 2.5s ease-in-out; } .tr-sixth img:hover, .tr-sixth img:active { -webkit-transform-origin: 200%; -webkit-transform: rotate(360deg) scale(2) translate(150px, -30px); transform-origin: 200%; transform: rotate(360deg) scale(2) translate(150px, -30px); } |
飛行機の離陸
飛行機が離陸するところを表現してみました。
こちらもCSS3のtransformプロパティを利用しています。
HTMLとCSSコードは以下になります。
|
1 2 3 |
<div class="tr-seventh"> <p><img src="img/plane.png"></p> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.tr-seventh img { -webkit-transition-duration: 4s; -webkit-transition-timing-function: cubic-bezier(0.5, 0.2, 0.2, 0.2); -webkit-transition-delay: 1s; transition-duration: 4s; transition-timing-function: cubic-bezier(0.5, 0.2, 0.2, 0.2); transition-delay: 1s; } .tr-seventh img:hover, .tr-seventh img:active { -webkit-transform: rotate(-20deg) translate(500px, -100px); transform: rotate(-20deg) translate(500px, -100px); } |
いかがでしたか？ JavaScript を使わなくても、CSS3 transitionだけでここまでアニメーションが可能です。
CSS3には他に「animationプロパティ」というのも用意されていますので、また別の記事で紹介します。
スポンサーリンク
