CSS3で簡単アニメーション!画像や要素を動かせる!背景色が変化する!

CSS3アニメーション

JavaScriptは分かんなーい!という方も、CSS3を使ったアニメーションはキーフレームでの指定なので簡単かも!?

まずはサンプルからどうぞ!

サンプル1「移動」

CSS3

 

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>サンプル1「移動」</title>
	<style type="text/css">
	@keyframes moveimg {
		0% { left: 0px; top: 0px;}
		50% { left: 100px; }
		100% { left: 100px; top: 100px; }
	}

	#sample1{
		animation: moveimg 5s infinite;
		position: relative;
	}
	</style>
</head>
<body>

	<img src="CSS3.png" id="sample1">

</body>
</html>

※ @keyframes のプレフィックスは省略しています。

PR

 

サンプル2「背景色の変化」

 

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>サンプル2「背景色の変化」</title>
	<style type="text/css">
	@keyframes bgcolor {
		0% { background-color: #aeff00; }
		50% { background-color: #ffae00; }
		75% { background-color: #ff008a; }
		100% { background-color: #aeff00; }
  	}

	#sample2 {
		background-color: #aeff00;
		width: 500px;
		height: 200px;
		border: 1px solid #666;
		animation: bgcolor 10s infinite;
	}
	</style>
</head>
<body>
	<p id="sample2">背景色が変わります</p>
</body>
</html>

※ @keyframes のプレフィックスは省略しています。

 

サンプル3「ゆらゆら」

このBOXがゆらゆら

 

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>サンプル3「ゆらゆら」</title>
	<style type="text/css">

	@keyframes yurayura {
		0% { transform: rotate(0deg); }
		25% { transform: rotate(15deg); }
		50% { transform: rotate(0deg); }
		75% { transform: rotate(-15deg); }
		100% { transform: rotate(0deg); }
	}

	#sample3 {
		animation: yurayura 3s linear infinite;
		border: 1px solid #ccc;
		width: 200px;
		text-align: center;
		margin: 300px auto 0;
		background-color: #c00;
	}
	</style>
</head>
<body>

	<p id="sample3">このBOXがゆらゆら</p>

</body>
</html>

※ @keyframes のプレフィックスは省略しています。

 

キーフレームの設定

まずは、CSSの中でキーフレームを設定します。

キーフレームとは、CGのアニメーションの中で主となる変化が定義されているフレームのことである。物体の形や位置の変化ポイントが指定され、その間を補完することで滑らかな動画像が作成される。
「IT用語辞典バイナリ」より

@keyframes 任意の名前 {
	0% { transform: rotate(0deg); }
	50% { transform: rotate(15deg); }
	100% { transform: rotate(0deg); }
}

パーセント(%)でキーフレームを指定します。

上の例では、「0%、50%、100%」の3ヶ所をキーフレームにしており、0%時に0度、50%時に15度まで回転し、100%時に0度まで戻ります。@keyframesの後に任意の名前をつけます。この名前は、後で使用します。

なお、webkit系のレンダリングエンジンを使用しているブラウザにはプレフィックスが必要です。プレフィックスは「@-webkit-keyframes」とつけます。

上のサンプル1「ゆらゆら」にプレフィックスをつける場合は、次の様に記述します。

@-webkit-keyframes yurayura {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(15deg); }
	50% { transform: rotate(0deg); }
	75% { transform: rotate(-15deg); }
	100% { transform: rotate(0deg); }
}
@keyframes yurayura {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(15deg); }
	50% { transform: rotate(0deg); }
	75% { transform: rotate(-15deg); }
	100% { transform: rotate(0deg); }
}

 

animationプロパティ

animationプロパティでアニメーションの設定を記述します。

animation-name
@keyframesで設定した名前を指定します。
animation-duration
アニメーションの長さを秒数で指定します。指定方法は「秒数s」と数字にsを付けて指定します。
animation-timing-function
アニメーションのタイミングや進行割合を指定する際に使用します。

  • ease ・・・滑らかに(初期値)
  • linear ・・・ 一定
  • ease-in ・・・ ゆっくり始まる
  • ease-out ・・・ ゆっくり終わる
  • ease-in-out ・・・ ゆっくり始まってゆっくり終わる
animation-delay
アニメーションがいつ始まるかを指定します。初期値は0ゼロで、すぐに開始されます。
animation-iteration-count
アニメーションを繰り返す回数を数字で指定します。

  • 数字 ・・・ 数字の回数分繰り返します。
  • infinite ・・・ 無限に繰り返します。
animation-direction
アニメーションを交互に反転再生させるかどうかを指定する

  • normal ・・・ 普通にアニメーションを繰り返します(初期値)
  • alternate ・・・ 奇数回は普通に、偶数回は逆再生でアニメーションを繰り返します。
animation-play-state
アニメーションの再生と一時停止を指定します。ロールオーバで一時停止とかって時に使用する?

  • running ・・・ 再生(初期値)
  • paused ・・・ 一時停止
animation-play-state
再生前後の状態を指定します。
  • none ・・・ アニメーションで指定されたスタイルは、アニメーションの実行前や実行後には適用されない。(初期値)
  • forwards ・・・ 再生後、最後のキーフレームの状態を保持
  • backwards ・・・ 再生前、最初のキーフレームの状態を適用
  • both ・・・ forwards と backwards の両方を適用

 

実際の記述

サンプル3「ゆらゆら」のanimationプロパティを1つ1つ記述すると次の様になります。

animation-name : yurayura;
animation-duration : 3s;
animation-timing-function : linear;
animation-iteration-count : infinite;

animationプロパティもbackgroundプロパティなどと同様にまとめて記述することができます。

animation: yurayura 3s linear infinite;

参考サイト

 

PR

関連記事