【CSSとは (4-3)】CSS3 animation アニメーションの実装

カテゴリ : CSSとは, html/css

animation: アニメーションの設定をまとめて記述

animation-name、 animation-duration、 animation-timing-function、 animation-delay、 animation-iteration-count、 animation-direction、animation-fill-modeを、組み合わせて指定することができる

animation-name :キーワード(任意)

アニメーションの名前を決める、後述の@keyframes(具体的な実行内容を指定する記述)で指定されるため必須

animation-duration:数値(単位をs / 秒で指定)

アニメーションが行われる時間を指定する

animation-timing-function:キーワード

アニメーションの速度変化を指定する

  • ease 開始と完了を滑らかにする(初期値)
  • linear 一定に動かす、機械的に動く
  • ease-in ゆっくり始まる、加速がかかる
  • ease-out ゆっくり終わる、減速がかかる
  • ease-in-out ゆっくり始まってゆっくり終わる、加速・等速・減速がかかるため自然に動く

animation-delay:数値(単位をs / 秒で指定)

アニメーションを開始する時間を設定する

animation-iteration-count:数値またはキーワード

アニメーションを実行する回数

  • infinite 無限に再生を繰り返す
  • 数値 再生回数を指定(初期値は1)

animation-direction

アニメーションを複数回繰り返す場合、方向を交互に反転再生させるかどうかを指定する
(例:背景を白から黒までアニメーションさせた後、黒から白へと反転させるかどうか)

  • normal 普通方向にアニメーションを繰り返し再生する(初期値)
  • alternate アニメーションの方向を交互に反転再生させる

animation-fill-mode : キーワード

アニメーション終了後の状態を設定する(アニメーション実行回数が無限の場合無効)

  • none アニメーション終了後にcssは適用されなくなる(初期値)
  • forwards アニメーション終了後は最後に指定したcssが適用
  • backwards アニメーション終了後は最初に指定したcssが適用

例)

h1{
  animation: bgChg 10s ease 2s infinite alternate;
}

上記の実行内容:

アニメーションの名前:bgChg

アニメーションする時間:10秒間
アニメーションの速度変化:開始と完了を滑らかにする
アニメーションをいつ開始するか:読み込んでから2秒
アニメーションの繰り返し数:無限
アニメーションの方向:交互に反転再生させる

@keyframesの記述

具体的なアニメーションの実行内容を指定する(キーフレームアニメーションを作成)

 

@keyframes アニメーションの名前{
0%{プロパティ: 値;プロパティ:値;プロパティ:値;}
50%{プロパティ: 値;プロパティ:値;プロパティ:値;}
100%{プロパティ: 値;プロパティ:値;プロパティ:値;}
}

@keyframesの後にアニメーションの名前を指定(あらかじめanimationプロパティで設定した名前)し、%によるアニメーションの指定を行う。各位置ごとにCSSのプロパティと値を記述(複数指定可)し、それぞれの位置の変化をアニメーションする

例)

 

@keyframes bgChg{
0%{background-color: #f00;color:#ff0}
50%{background-color: #0f0;color:#000}
100%{background-color: #ff0;color:#f00}
}

指定するアニメーションの名前:bgChg

 0%の指定:背景を赤、文字色を黄色
 50%の指定:背景を緑、文字色を黒
100%の指定:背景を黄色、文字色を赤

 

【CSSのみで作成】スクロールを促すアニメーション

カテゴリ : CSSとは, html/css, HTMLとは

Webページのヘッダー部分などに良くみられる、ページ下へのスクロールを促すためのサンプルと解説になります。
線が上から下にアニメーションをするシンプルな内容です。

svgやjs(jQuery )などは使用せず、CSS3のanimationプロパティのみで作成をします。

サンプルのコピー&ペーストのみで実装ができます。

記述例(html / css):

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
	<style>
		#test{
			background-color: #ccc;
			height: 150px;
			overflow: hidden
		}

		#test:after{
			content:"";
			display: block;
			width: 1px;
			border-left:1px #000 solid;
			animation:scroll 2s ease 0s infinite normal;
			margin: 0 auto 0;
		}

		@keyframes scroll{
			0%{
				height: 0;
			}
			50%{
				height: 150px;
				margin-top: 0;
			}
			100%{
				margin-top: 150px;
				height: 150px;
			}
		}
	</style>
</head>

<body>
	<p id="test"></p>
</body>
</html>

実際の動きはデモからご覧いただけます。

解説:

・HTMLの記述はp(id名test)のみとなります。

・CSSで#testに対しheightを指定し、overflow:hiddenで子要素がはみ出した場合の処理を隠すようにします。(背景色は領域確認用なので削除して構いません)

・#test内に:afterの記述で要素を作成、content:”” で内容は空としborder-leftでアニメーションさせる線を表現します。

・キーフレームの記述で0%時点で高さを0に、50%で高さを150pxにすることで上から下に線が描画されます。

・また50%時点でmargin-topを0に、100%でmargin-topを150pxにすることで線の上の位置を移動させるアニメーションを実装します。

タグ:||

【CSSとは (3-11)】 ::before / ::after 擬似要素について

カテゴリ : CSSとは, html/css

要素名::beforeと要素名::afterによる擬似要素の作成

CSSのセレクタ 部分に要素名::before(または要素名::after)と指定することで、要素の直前(または直後)に内容を挿入することができます。

この記事の続きを読む

【CSS】レスポンシブWebデザインについて【メディアクエリ】

カテゴリ : CSSとは, html/css

レスポンシブWebデザインについて

大きさの異なるデバイス毎(PC、タブレット、スマートフォンなど)に、Webページのレイアウトを可変させるデザインをレスポンシブWebデザインと言います。
一つのHTMLファイルに対してCSSでデバイスごとのレイアウトを指示するものとなります。

この記事の続きを読む

【HTML】 よく使用するタグ一覧

カテゴリ : html/css, HTMLとは

HTMLでよく使用するタグの一覧を紹介します。

Webサイト制作において毎回と言って良いほど使用される基本的なタグの一覧になります。
各タグのページへのリンクも貼っているので、詳細はリンク先から確認してください。

この記事の続きを読む

最近の投稿

About Web Site & Key Word

このWebサイトについて&キーワード

■ html,css,JavaScriptなどのweb言語についての解説やメモ、Flash(ActionScript)でゲーム制作を行うための技術紹介、 WordPressを使用したCMS作成のための解説やメモ、アプリ制作の記録や解説やメモ、またそれらにまつわるニュースやブログを掲載します。

■ web制作,CMS制作,ゲーム制作,アプリ制作,
Android,iOS,iPhone,iPad,html,css,JavaScript,Flash,ActionScript,php,cgi,WordPress,Titanium Studio,ブログ,ニュース