第1回　プッシュボタンのアニメーション

新たに始まった連載「CSS3アニメーションでつくるインターフェイス表現」では、CSS3によるアニメーション表現を紹介していきたい。その中でも、幅広い読者に応用してもらえるだろうインターフェイスをおもなお題とする。CSS3が充実し、ブラウザの実装も進んできたので、JavaScriptコードを書かずとも豊かな表現ができる。第1回は、基本を抑える意味で、プッシュボタンのアニメーションをつくる。

ボタンのもとになる静的スタイル

まず、<body>要素に書くコードだ。プッシュボタンにする<a>要素は、つぎのようにclass属性"button"を定めた<p>要素に含める。それをさらに、class属性"container"の<div>要素で包んだ。

<body>
<div class="container">
	<p class="button"><a href="#">Push Button</a></p>
</div>
</body>

プッシュボタンのもととなるスタイル（図1）は、以下の<style>要素で定める。まだ、アニメーションはしないし、四角い背景があるだけでプッシュボタンとしての見た目も寂しい。順に手を加えていこう。

<style>
body {
	background: white;
	font: 30px sans-serif;
}
.button a {
	display: block;
	width: 200px;
	margin: 0 auto;
	padding: 10px;
	color: white;
	text-align: center;
	text-decoration: none;
	background-color: lightseagreen;
}
</style>

ボタンの角に丸みを加える

ボタンらしく、4つの角は丸める。そのためのプロパティは、border-radiusだ。プロパティの値には、角丸の半径を与える。

border-radius: 角丸の半径

プッシュボタン（class属性"button"）の<a>要素に、つぎのようにボックスの角丸（5ピクセル）を定めた。すると、ボタンの背景の4つの角に丸みが加わる（図2⁠）⁠。

.button a {

	border-radius: 5px;
}

影でボタンを立体的に見せる

さらに、box-shadowプロパティでボタンに影を加えたい。オプション（構文の[]は省略可の意）のinsetは後で用いる。水平・垂直のずれをともに正の値にすると、影は右下につく。負の値なら左上だ。

box-shadow: [inset] 水平のずれ 垂直のずれ ぼけ幅 カラー

プッシュボタン（class属性"button"）の<a>要素には、つぎのように右下に影を加えた（図3⁠）⁠。影はrgba()関数で半透明にしている。

.button a {

	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.6);
}

box-shadowプロパティには、カンマ（,）区切りで影をいくつでも加えられる。オプションにinsetを与えると、影はボックスの内側にかかる。位置は、水平・垂直のずれをともに正の値にすると左上に、負の値だと右下になる。つぎのように、内側左上を白、右下を黒で定めれば、ボタンが出っ張って見える（図4⁠）⁠。

.button a {

	box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
		inset -4px -4px 4px rgba(0, 0, 0, 0.4);
}

プッシュボタンの外側右下の影も加えた<style>要素の記述はつぎのとおりだ。これで、3次元で出っ張ったように見えるプッシュボタンの右下に影を加えた表現ができた（図5⁠）⁠。

body {
	background: white;
	font: 30px sans-serif;
}
.button a {
	display: block;
	width: 200px;
	margin: 0 auto;
	padding: 10px;
	color: white;
	text-align: center;
	text-decoration: none;
	background-color: lightseagreen;
	border-radius: 5px;
	box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
		inset -4px -4px 4px rgba(0, 0, 0, 0.4),
		4px 4px 8px rgba(0, 0, 0, 0.6);
}

マウスポインタを重ねたときのボタンの表現

プッシュボタンにマウスポインタを重ねたとき、見た目が変わるようにしよう。つぎのように<a>要素の:hover擬似クラスで、背景色を明るめに変えるとともに、影は縮めた。さらに、transformプロパティで位置を少し下げる。translateY()関数が垂直位置を動かす。これで、マウスポインタが重なると、プッシュボタンの色と影が変わって、下にずれる（図6）

.button a:hover {
	background-color: mediumaquamarine;
	box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.6),
		inset -2px -2px 4px rgba(0, 0, 0, 0.4),
		2px 2px 4px rgba(0, 0, 0, 0.8);
	transform: translateY(2px);
}

プッシュボタンのボックスの位置を下げるには、transformプロパティでなく、たとえばつぎのようにtopプロパティで変えることもできる。だが、transformは位置を動かすだけでなく、伸縮や回転もできるし、さらに3次元の表現も加えられる。さまざまなCSSのアニメーションを試してみようというこの連載では、こちらのプロパティを使いたい。

.button a {
	position:relative;

}
.button a:hover {

	top: 2px;
}

プッシュボタン上でマウスボタンを押したときの表現は、<a>要素の:active擬似クラスにつぎのように定める。内側（insetオプション）の影の左上と右下の色を入れ替えれば、プッシュボタンは凹んで見える（図7⁠）⁠。外側の影はさらに縮めて、位置も下げた。これでプッシュボタンとしての基本的な動きができた。

.button a:active {
	color: gainsboro;
	background-color: darkcyan;
	box-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.4),
		inset 2px 2px 4px rgba(0, 0, 0, 0.8),
		1px 1px 1px rgba(0, 0, 0, 0.6);
	transform: translateY(4px);
}

ベンダープレフィックスと-prefix-free

ひとつ注意しておかなければならないのは、transformプロパティの仕様だ。本稿執筆時現在では「草案」となっている。そのため、ブラウザやそのバージョンによっては、ベンダープレフィックス（接頭辞）を添えなければならない。たとえば、ChromeやSafariであれば、つぎのようにプレフィックス-webkitを加えることになる。

.button a:active {

	-webkit-transform: translateY(4px);
	transform: translateY(4px);
}

この連載はCSS3のアニメーションでどのような表現ができるのか、実験的な紹介をしていきたい。したがって、「⁠勧告」前の機能も使うつもりだ。他方で、細かい装飾的なコードは省いて、簡潔に示したいと考える。そこで、ベンダープレフィックスは、JavaScriptライブラリ「-prefix-free」を使って入力は省くことにしよう（図8⁠）⁠。-prefix-freeはつぎのように<script>要素に読み込めばよく（JSファイルはフォルダ「lib」に納めた⁠）⁠、JavaScriptコードは書かなくてよい。

<script src="lib/prefixfree.min.js"></script>

ボタンに滑らかなアニメーションを定める

擬似クラス:hoverと:activeに定めたプッシュボタンの見た目は、このままではただちに切り替わる。滑らかなアニメーションにした方が、魅力は増すだろう。そこで、transitionプロパティ（仕様は「草案⁠」⁠）を用いる。最低限与えるべき値は、アニメーションに費やす時間だ（あとはデフォルト値が使われる⁠）⁠。つぎのようにプッシュボタンの<a>要素にプロパティを定めれば、0.5秒かけて滑らかに動く。

.button a {

	transition: 0.5s;
}

プッシュボタンを押したときの動き（:active擬似クラス）はもっと速くしたい。もちろん、transitionプロパティを定め直してもよい。だが、アニメーション時間だけを変え、他の設定は触らずにおきたいという場合に備えて、つぎのようにtransition-durationプロパティを使うことにしよう。

.button a:active {

	transition-duration: 0.2s;
}

これで今回のお題のプッシュボタンのアニメーションはでき上がった。ここまで書いてきた<script>と<style>の定めはつぎのコード1のとおりだ。併せて、後掲サンプル1をjsdo.itに掲げた。

コード1　プッシュボタンのアニメーション

<script src="lib/prefixfree.min.js"></script>
<style>
body {
	background: white;
	font: 30px sans-serif;
}
.button a {
	display: block;
	width: 200px;
	margin: 0 auto;
	padding: 10px;
	color: white;
	text-align: center;
	text-decoration: none;
	background-color: lightseagreen;
	border-radius: 5px;
	box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
		inset -4px -4px 4px rgba(0, 0, 0, 0.4),
		4px 4px 8px rgba(0, 0, 0, 0.6);
	transition: 0.5s;
}
.button a:hover {
	background-color: mediumaquamarine;
	box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.6),
		inset -2px -2px 4px rgba(0, 0, 0, 0.4),
		2px 2px 4px rgba(0, 0, 0, 0.8);
	transform: translateY(2px);
}
.button a:active {
	color: gainsboro;
	background-color: darkcyan;
	box-shadow: inset -2px -2px 4px rgba(255, 255, 255, 0.4),
		inset 2px 2px 4px rgba(0, 0, 0, 0.8),
		1px 1px 1px rgba(0, 0, 0, 0.6);
	transform: translateY(4px);
	transition-duration: 0.2s;
}
</style>

サンプル1　CSS3: Push button