CSS Animationを使う

こんにちは。

すみません。
しばらく更新してませんでした。。

久しぶりにHTML・CSSをいじりました。笑
CSSでは簡単にアニメーションを書くことができるようです。
ということで、今回は「animation」についてです。

CSSのAnimation（アニメーション）は思ったよりも簡単で要素にanimation-nameを指定して、@keyframeで動きを指定できます。
では、早速コード書いてみましょう。

動かしたいクラスにanimation-nameを指定します。

div.prefix_sample{
	animation-name: 'anime1';
	animation-duration: 5s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}

animation-durationは動く速さです。
秒単位で指定できます。
animation-timing-functionは動く時の動き方です。
iteration-countは何回動かすか。
infiniteで永遠に繰り返されます。

そして、@keyframeで挙動を指定します。

@keyframes 'anime1' {
	0% {
		width: 100px;
		height: 50px;
		top:30%;
		background-color: aqua;
	}
	50% {
		width: 100px;
		height: 50px;
		top:20%;
		background-color: blue;
	}
	100% {
		width: 100px;
		height: 50px;
		top:30%;
		background-color: aqua;
	}
}

0%の時のスタイルと100%の時のスタイルを指定すれば、0%から100%までスムーズに動きます。
途中に50%などで指定することで、そのスタイルも経由させることができます。

テストコード全文を以下に記します。
一部の環境で正しく動かないことがあるので、ベンダープレフィックスがついています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>CSS Anime-てすと</title>
<style>
div.prefix_sample {
	position:fixed;
	top:30%;
	left:50%;
	text-align:center;
	color:#FFF;

	-moz-animation-name: 'anime1';
	-moz-animation-duration: 5s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: infinite;

	-webkit-animation-name: 'anime1';
	-webkit-animation-duration: 5s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: infinite;

	-o-animation-name: 'anime1';
	-o-animation-duration: 5s;
	-o-animation-timing-function: ease;
	-o-animation-iteration-count: infinite;

	-ms-animation-name: 'anime1';
	-ms-animation-duration: 5s;
	-ms-animation-timing-function: ease;
	-ms-animation-iteration-count: infinite;
}

@-moz-keyframes 'anime1'{
	0% {width: 100px; height: 50px; top:30%; background-color: aqua;}
	50% {width: 100px; height: 50px; top:20%; background-color: blue;}
	100% {width: 100px; height: 50px; top:30%; background-color: aqua;}
}


@-webkit-keyframes 'anime1' {
	0% {width: 100px; height: 50px; top:30%; background-color: aqua;}
	50% {width: 100px; height: 50px; top:20%; background-color: blue;}
	100% {width: 100px; height: 50px; top:30%; background-color: aqua;}
}

@-o-keyframes 'anime1' {
	0% {width: 100px; height: 50px; top:30%; background-color: aqua;}
	50% {width: 100px; height: 50px; top:20%; background-color: blue;}
	100% {width: 100px; height: 50px; top:30%; background-color: aqua;}
}

@-ms-keyframes 'anime1' {
	0% {width: 100px; height: 50px; top:30%; background-color: aqua;}
	50% {width: 100px; height: 50px; top:20%; background-color: blue;}
	100% {width: 100px; height: 50px; top:30%; background-color: aqua;}

}
</style>
</head>
<body>
	<div class="prefix_sample">Kani-momonga</div>
</body>
</html>

日	月	火	水	木	金	土
« 2月
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

カニとモモンガと愉快なユウ

薬学生のDeveloper・VBからPHPなど

CSS Animationを使う

INFORMATION

カレンダー

TABI FUN

最近の投稿

リンク

カテゴリー