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

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

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

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

transitionプロパティ

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

transitionプロパティの簡単な例

  1. 通常のマウスホバー

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

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プロパティを記述をします。トリガー側(:hoverなど)にはプロパティの終了値だけを記述します。
もし、初期値ではなくトリガー側にtransitionの記述をすると、もとに戻るときのアニメーションが行われません。

transitionプロパティの明細

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

transition-property
変化させたいプロパティを決めます。例えば背景色を変化させる場合は、値をbackground-colorとします。複数指定する場合は,で値を区切ります。値にallを指定すると全てのプロパティにtransition効果が適用されます。noneはtransition効果を適用しません。
*アニメーションできるプロパティはこちらのページを参照
transition-duration
変化する時間を指定します。秒単位(s)で指定します。(小数可) 初期値は0s
transition-timing-function
イージングの設定です。 ease、linear、ease-in、ease-out、ease-in-outのいずれかのキーワードで指定するか、cubic-bezier(数値, 数値, 数値, 数値)で指定します。
transition-delay
スタイルの変化を開始するまでの時間を指定します。初期値は0s

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;	
}