transitionプロパティでアニメーション〜CSS３

＊この記事は一部修正と訂正を行っています。（2015/08/30）
gifアニメやFLASH全盛のころのような派手なアニメーションは敬遠されがちですが、ユーザビリティから見て使いやすく誘導するためのアニメーションは歓迎されます。そんなワンポイントのアニメーションに便利なものがCSS３のアニメーションです。

要素に簡単な動きをつけるにはCSS3で定義されている「transitionプロパティ」か「animationプロパティ」を使います。
「transitionプロパティ」は適用プロパティの値が変わると発生し、「animationプロパティ」は開始を指示して発生させる違いがあります。今回は「transitionプロパティ」の説明です。

transitionプロパティ

たとえば、疑似クラスの:hoverでCSSの設定が変化するときに即座に切り替わるのではなく、徐々に変化させたい場合に「transitionプロパティ」を使用します。この場合は:hoverがトリガーになります。

transitionプロパティの簡単な例

1. 通常のマウスホバー

   hover

2. transitionプロパティを使用したマウスホバー

   hover

HTMLコード

<h3>transitionプロパティの簡単な例</h3>
<ol>
 <li>通常のマウスホバー
<div class="no1">
<button>hover</button>
</div>
</li>
<li>
transitionプロパティを使用したマウスホバー
<div class="no2">
<button>hover</button>
</div>
</li>
</ol>

CSSコード

.no1 button{
  background:red;
  color:#FFF;
}
.no1 button:hover{
  background:blue;
}

.no2 button{
  background:red;
  color:#FFF;
  transition:all 2s;
}
.no2 button:hover{
  background:blue;  
}

瞬間でスタイルを変化させるのではなく、ふわっと切り替える仕組みがtransitionプロパティです。
ふわっと切り替えるということはつまり、スタイルを切り替える時間を決められるということです。
AというスタイルからBというスタイルに変化させる時間を長くするとじわじわと変化をし、その時間を短くすると瞬間でスタイルが切り替わることになります。

この例では「.no2 button」の初期値に「background:red;」と、トランジションの設定「transition:all 2s;」が定義されています。
トリガーは「:hover」疑似クラスになります。このトリガーの疑似クラスに終了値「background:blue;」が設定されます。

transitionプロパティの明細

transitionプロパティには次の４つのプロパティが用意されています。
transition-property、 transition-duration、 transition-timing-function、 transition-delay
それぞれの用途は次のとおりです。

transition-property

変化させたいプロパティを決めます。例えば背景色を変化させる場合は、値をbackground-colorとします。複数指定する場合は,で値を区切ります。値にallを指定すると全てのプロパティにtransition効果が適用されます。noneはtransition効果を適用しません。
＊アニメーションできるプロパティはこちらのページを参照

transition-duration

変化する時間を指定します。秒単位(s)で指定します。（小数可）　初期値は０s

transition-timing-function

イージングの設定です。 ease、linear、ease-in、ease-out、ease-in-outのいずれかのキーワードで指定するか、cubic-bezier(数値, 数値, 数値, 数値)で指定します。

transition-delay

スタイルの変化を開始するまでの時間を指定します。初期値は０s

transition:all 2s;などのようにtransition-propertyをallにしてtransition-durationを何秒にするか決めれば簡単に動作をアニメーションすることができます。

transitionの設定例

マウスホバーすると背景色が変わり、その後に幅が広がる例
transitionなしのサンプル

transition設定のサンプル

transition設定のHTMLのコード

<div class="box1">Box1</div>
<div class="box2">Box2</div>
<div class="box3">Box3</div>

CSSの設定

div{
	width:100px;
	height:50px;
	margin:10px;
}
.box1{
	background-color:pink;
	transition-property:background-color,width ;
	transition-duration:1s;
	transition-timing-function:linear;
	transition-delay:0s,1s;
}
.box2{
	background-color:lime;
	transition-property:background-color,width ;
	transition-duration:1s;
	transition-timing-function:linear;
	transition-delay:0s,1s;	
}
.box3{
	background-color:lightblue;
	transition-property:background-color,width ;
	transition-duration:1s;
	transition-timing-function:linear;
	transition-delay:0s,1s;	
}
.box1:hover{
	background-color:red;	
	width:300px;
}
.box2:hover{
	background-color:green;
	width:400px;
}
.box3:hover{
	background-color:blue;
	width:500px;
}

ショートハンドの例

上のサンプルをショートハンドを使って設定した例

div{
	width:100px;
	height:50px;
	margin:10px;
}
.box1{
	background-color:pink;
	transition:background-color 1s linear 0s,width 1s linear 1s;
}
.box2{
	background-color:lime;
	transition:background-color 1s linear 0s,width 1s linear 1s;	
}
.box3{
	background-color:lightblue;
	transition:background-color 1s linear 0s,width 1s linear 1s;	
}
.box1:hover{
	background-color:red;	
	width:300px;
}
.box2:hover{
	background-color:green;
	width:400px;	
}
.box3:hover{
	background-color:blue;
	width:500px;	
}