CSS3アニメーションを利用したサンプル

CSS Niteビギナーズ：HTML5+CSS3でCSS3アニメーションを紹介したところ、使いどころがよく分からないとの意見をたくさん頂いたので、サンプルをいくつかご紹介します。

実際の動作はサンプルページから確認できます。

sample1

ボタンにマウスをのせた際にアニメーションして背景色を切り替えます。

/*sample1*/
.sample1 a{
	background:#3f8bad;
	text-decoration:none;
	padding:1em;
	color:white;
	-webkit-transition:all 400ms;
	-moz-transition:all 400ms;
	-ms-transition:all 400ms;
	-o-transition:all 400ms;
	transition:all 400ms;
}
.sample1 a:hover{
	text-decoration:none;
	color:white;
	background:#1a4969;
}

sample2

ボタンにマウスをのせた際に背景画像のpositionをアニメーションで変更します。

/*sample2*/
.sample2 a{
	background: url(bg.gif) 0 100%;
	text-decoration:none;
	padding:1em;
	color:white;
	-webkit-transition:all 400ms;
	-moz-transition:all 400ms;
	-ms-transition:all 400ms;
	-o-transition:all 400ms;
	transition:all 400ms;
}
.sample2 a:hover{
	text-decoration:none;
	color:white;
	background-position: 0 0;
}

sample3

ニュースティッカーをCSS3のkeyframes animationで実装したサンプルです。positionのleftプロパティをアニメーションさせています。0〜20%はアニメーションを停止されるためleftプロパティは変更していません。animation-iteration-count にinfiniteを指定して永遠にアニメーションが実行されるようにしています。

/*sample3*/
.sample3{
	width:400px;
	height: 1.5em;
	position: relative;
	overflow: hidden;
	border: 1px solid #CCC;
}
.sample3 span{
	width: 1100px;
	position: absolute;
	-webkit-animation: sample3Anime 17s linear infinite;
	-moz-animation: sample3Anime 17s linear infinite;
	-ms-animation: sample3Anime 17s linear infinite;
	-o-animation: sample3Anime 17s linear infinite;
	animation: sample3Anime 17s linear infinite;
}
@-webkit-keyframes sample3Anime{
	0%{left:0px;}
	10%{left:0px;}
	100%{left:-1100px;}
}
@-moz-keyframes sample3Anime{
	0%{left:0px;}
	10%{left:0px;}
	100%{left:-1100px;}
}
@-ms-keyframes sample3Anime{
	0%{left:0px;}
	10%{left:0px;}
	100%{left:-1100px;}
}
@-o-keyframes sample3Anime{
	0%{left:0px;}
	10%{left:0px;}
	100%{left:-1100px;}
}
@keyframes sample3Anime{
	0%{left:0px;}
	10%{left:0px;}
	100%{left:-1100px;}
}

sample4

新着情報の横の矢印をアニメーションさせています。矢印はbefore擬似要素で作成したボックスのborderをtransformのrotateで回転させ表現しています。

.sample4{
	text-indent: 1em;
}
.sample4:before{
	content:"";
	position: relative;
	left:-5px;
	top:-2px;
	display: inline-block;
	width:5px;
	height:5px;
	border-top:2px solid red;
	border-right:2px solid red;
	vertical-align: center;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);
	-webkit-animation: sample4Anime 400ms infinite;
	-moz-animation: sample4Anime 400ms infinite;
	-ms-animation: sample4Anime 400ms infinite;
	-o-animation: sample4Anime 400ms infinite;
	animation: sample4Anime 400ms infinite;
}
@-webkit-keyframes sample4Anime{
	0%{left:-10px;}
	100%{left:-3px;}
}
@-moz-keyframes sample4Anime{
	0%{left:-10px;}
	100%{left:-3px;}
}
@-ms-keyframes sample4Anime{
	0%{left:-10px;}
	100%{left:-3px;}
}
@-o-keyframes sample4Anime{
	0%{left:-10px;}
	100%{left:-3px;}
}
@keyframes sample4Anime{
	0%{left:-10px;}
	100%{left:-3px;}
}

sample5

写真のサムネイルにマウスを乗せると拡大するサンプルです。transformのscaleで拡大しています。

/*sample5*/
.sample5{
	text-align: center;
}
.sample5 img{
	width: 100px;
}
.sample5 img:hover{
	-webkit-transition:all 400ms;
	-moz-transition:all 400ms;
	-ms-transition:all 400ms;
	-o-transition:all 400ms;
	transition:all 400ms;
	-webkit-transform:scale(3);
	-moz-transform:scale(3);
	-ms-transform:scale(3);
	-o-transform:scale(3);
	transform:scale(3);
}

CSS3アニメーションはFlashのような大胆な表現も可能ですが、ピンポイントで利用することでサイトにちょっとしたアクセントを付けることもできます。

スポンサードリンク

2013年4月14日 13:29
カテゴリー CSS

«クロスブラウザを意識した「transitionend 」 | メイン | jQuery 2.0を利用するために注意すること»