CSS3アニメーションでつくるインターフェイス表現

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

この記事を読むのに必要な時間:およそ 3.5 分

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

プッシュボタンにマウスポインタを重ねたとき,見た目が変わるようにしよう。つぎのように<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);
}

図6 マウスポインタを重ねたときのプッシュボタンの表現

図6 マウスポインタを重ねたときのプッシュボタンの表現

プッシュボタンのボックスの位置を下げるには,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);
}

図7 マウスボタンを押したときのプッシュボタンの表現

図7 マウスボタンを押したときのプッシュボタンの表現

ベンダープレフィックスと-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>

図8 -prefix-freeサイト

図8 -prefix-freeサイト

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

擬似クラス: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

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入