こんにちは！
今日も頑張ろう

Lesson-11
CSS アニメーションを活用しましょう

L11.1 はじめに

L11.1.1 概要

CSS アニメーションを使用すると Web サイト上で動きを出すことができます。
CSS アニメーションを実現するためには、transition、transform、animation/@keyflame プロパティを使用します。
本レッスンでは、CSS アニメーションの作成方法と合わせて実際の CSS アニメーション活用例を通して CSS アニメーションを使用法を学びます。
CSSアニメーションには、以下の分類のプロパティがあります。

transition
アニメーションの変化の適用対象と時間を指定します。

transform
アニメーションの変形する形態（移動、回転、伸縮、傾斜）を指定すします。

animation
アニメーションの実施（@keyframesの適用）を指定します。
@keyflame を使用してアニメーションの開始から終了までの動きの制御規則を指定します。

L11.2 transition（適用対象と時間）

L11.2.1 transition 関連プロパティ

transition 関連プロパティは、アニメーションの変化の適用対象と時間を指定します。

transition 関連プロパティには、以下の種類があります。

transition-property プロパティ: 変化の適用対象を指定します。
transition-duration プロパティ: 変化の開始から終了までの時間を指定します。
transition-delay プロパティ: 変化が開始するまでの遅延時間を指定します。
transition-timing-function プロパティ: 変化の仕方を指定します。
transition プロパティ: transition 関連プロパティを一括で指定します。

L11.2.2 transition-property（変化の適用対象）

transition-property: 変化の適用対象;

変化の適用対象を指定します。

変化の適用対象は、以下の値で指定します。

all（初期値）: transition が適用できるプロパティを全て指定できます。
特定のプロパティ: 指定したプロパティだけが対象になります。

使用上の注意事項

初期値は、all です。
すべての要素に適用できます。
継承しません。
ブラウザの対応状況は、caniuse サイトで確認してください。
プロパティの詳細情報は、mdn web docs サイトで確認してください。

使用例

background-color だけを対象にしたい場合は、以下のように指定します。

使用例

transition-property: background-color;

L11.2.3 transition-duration（変化の時間）

transition-duration: 変化の時間;

変化の開始から終了までの時間を指定します。時間の単位は秒（s）またはミリ秒（ms）で指定します。初期値は、0s で、この場合は変化はしません。

使用上の注意事項

初期値は、0s です。
すべての要素に適用できます。
継承しません。
ブラウザの対応状況は、caniuse サイトで確認してください。
プロパティの詳細情報は、mdn web docs サイトで確認してください。

使用例

(1) transition-duration: 変化の時間;

(a) ソースコード

ソースコード表示

HTML


<div class="s-11-1">アニメ</div>

CSS


div.s-11-1 {
	display: inline-block;
	width: 100px;
	height: 100px;
	line-height: 100px;
	font-size: 140%;
	text-align: center;
	background: linear-gradient(90deg, #9bfff5, #013f5d);
	transition-duration: （変化の時間）;
	transition-timing-function: linear;
}
.div.s-11-1:hover {
	width: 100%;
}

(b) 表示形式

※オンマウス（スマホはタップ）して確認してください。

L11.2.4 transition-delay（変化の遅延時間）

transition-delay: 変化の遅延時間;

変化が開始するまでの遅延時間を指定します。時間の単位は秒（s）またはミリ秒（ms）で指定します。初期値は、0s で、この場合は遅延することなくすぐに開始されます。

開始から 2 秒遅延させて変化させる時は以下のように指定します。

使用上の注意事項

初期値は、0s です。
すべての要素に適用できます。
継承しません。
ブラウザの対応状況は、caniuse サイトで確認してください。
プロパティの詳細情報は、mdn web docs サイトで確認してください。

使用例

(1) transition-delay: 変化の遅延時間;

(a) ソースコード

ソースコード表示

HTML


<div class="s-12-1">アニメ</div>

CSS


div.s-12-1 {
	display: inline-block;
	width: 100px;
	height: 100px;
	line-height: 100px;
	font-size: 140%;
	text-align: center;
	background: linear-gradient(90deg, #9bfff5, #013f5d);
	transition-delay: （変化の遅延時間）;
	transition-timing-function: linear;
}
.div.s-12-1:hover {
	width: 100%;
}

(b) 表示形式

※オンマウス（スマホはタップ）して確認してください。

L11.2.5 transition-timing-function（変化の仕方）

transition-timing-function: 変化の仕方;

変化の仕方を指定します。

変化の仕方は、以下の値で指定します。

ease: 開始時と終了時は緩やかに変化します。
linear: 開始から終了まで一定に変化します。
ease-in: 開始時は緩やかに、終了時は早く変化します。
ease-out: 開始時は早く、終了時は緩やかに変化します。

使用上の注意事項

初期値は、ease です。
すべての要素に適用できます。
継承しません。
ブラウザの対応状況は、caniuse サイトで確認してください。
プロパティの詳細情報は、mdn web docs サイトで確認してください。

使用例

(1) transition-timing-function: 変化の仕方;

(a) ソースコード

ソースコード表示

HTML


<div class="s-13-1">アニメ</div>

CSS


div.s-13-1 {
	display: inline-block;
	width: 100px;
	height: 100px;
	line-height: 100px;
	font-size: 140%;
	text-align: center;
	background: linear-gradient(90deg, #9bfff5, #013f5d);
	transition-duration: 3s;
	transition-timing-function: （変化の仕方）;
}
.div.s-13-1:hover {
	width: 100%;
}

(b) 表示形式

※オンマウス（スマホはタップ）して確認してください。

L11.2.6 transition（適用対象と時間一括指定）

transition: 変化の対象 変化の時間 変化の遅延 変化の仕方;

ショートハンドプロパティでありtransition 関連プロパティを一括で指定します。

変化の対象: transition-property の値を指定します。
変化の時間: transition-duration の値を指定します。
変化の遅延: transition-delay の値を指定します。
変化の仕方: transition-timing-function の値を指定します。

使用上の注意事項

ブラウザの対応状況は、caniuse サイトで確認してください。
プロパティの詳細情報は、mdn web docs サイトで確認してください。

使用例

transition: background-color 3s 2s linear;

L11.3 transform（変形する形態）

L11.3.1 transform 関連プロパティ

transform 関連プロパティは、アニメーションの変形する形態（移動、回転、伸縮、傾斜）を指定すします。transform には 2D（XY方向）と 3D（XYZ方向）の指定ができますが今回は、2D のみについて解説します。

transform 関連プロパティには、以下の種類があります。

transform（translate）プロパティ: 移動を指定します。
transform（rotate）プロパティ: 回転を指定します。
transform（scale）プロパティ: 伸縮を指定します。
transform（skew）プロパティ: 傾斜を指定します。

L11.3.2 transform（translate）（移動）


transform: translateX(X軸方向移動幅);
transform: translateY(Y軸方向移動幅);
transform: translate(X軸方向移動幅, Y軸方向移動幅);

移動を指定します。移動幅は、px や % で指定します。

移動幅は、以下の値を指定します。

translateX(X軸方向移動幅): X 軸方向に指定した幅を移動します。
translateY(Y軸方向移動幅): Y 軸方向に指定した幅を移動します。
translate(X軸方向移動幅, Y軸方向移動幅): XY 軸方向に指定した幅を移動します。

使用上の注意事項

初期値は、none です。
座標変換可能要素に適用できます。
継承しません。
ブラウザの対応状況は、caniuse サイトで確認してください。
プロパティの詳細情報は、mdn web docs サイトで確認してください。

使用例

(1) transform: translate(移動後の位置);

(a) ソースコード

ソースコード表示

HTML


<div class="s-21-1">アニメ</div>

CSS


div.s-21-1 {
	width: 100px;
	height: 100px;
	margin-left: 100px;
	line-height: 100px;
	font-size: 140%;
	text-align: center;
	background: linear-gradient(90deg, #9bfff5, #013f5d);
	transition-timing-function: ease-out;  
	transition-duration: 1s;
}
.div.s-21-1:hover {
	transform: translate(移動後の位置);
}

(b) 表示形式

※オンマウス（スマホはタップ）して確認してください。

L11.3.3 transform（rotate）（回転）


transform: rotate(回転角度);
transform: rotateX(X軸方向角度);
transform: rotateY(Y軸方向角度);

回転を指定します。回転する角度は deg で指定します。（90deg = 90度）

角度は、以下の値を指定します。

rotate(回転角度): 回転を指定します。整数は時計周り、負数は反時計周りになります。
rotateX(X軸方向角度): X軸方向に回転します。
rotateY(Y軸方向角度): Y軸方向に回転します。

使用上の注意事項

初期値は、none です。
座標変換可能要素に適用できます。
継承しません。
ブラウザの対応状況は、caniuse サイトで確認してください。
プロパティの詳細情報は、mdn web docs サイトで確認してください。

使用例

(1) transform: rotate(回転の方向と角度);

(a) ソースコード

ソースコード表示

HTML


<div class="s-22-1">アニメ</div>

CSS


div.s-22-1 {
	width: 100px;
	height: 100px;
	margin-left: 100px;
	line-height: 100px;
	font-size: 140%;
	text-align: center;
	background: linear-gradient(90deg, #9bfff5, #013f5d);
	transition-timing-function: ease-out;  
	transition-duration: 1s;
}
.div.s-22-1:hover {
	transform: rotate(回転の方向と角度);
}

(b) 表示形式

※オンマウス（スマホはタップ）して確認してください。

L11.3.4 transform（scale）（伸縮）


transform: scaleX(X軸方向伸縮率);
transform: scaleY(Y軸方向伸縮率);
transform: scale(X軸方向伸縮率, Y軸方向伸縮率);

伸縮を指定します。伸縮は元の大きさを 1 として比率（数値）で指定します。

伸縮率は、以下の値を指定します。

scaleX(X軸方向伸縮率): X 軸方向に指定した伸縮率で伸縮します。
scaleY(Y軸方向伸縮率): Y 軸方向に指定した伸縮率で伸縮します。
scale(X軸方向伸縮率, Y軸方向伸縮率): XY 軸方向に指定した伸縮率で伸縮します。

使用上の注意事項

初期値は、none です。
座標変換可能要素に適用できます。
継承しません。
ブラウザの対応状況は、caniuse サイトで確認してください。
プロパティの詳細情報は、mdn web docs サイトで確認してください。

使用例

(1) transform: scale(伸縮の方向と角度);

(a) ソースコード

ソースコード表示

HTML


<div class="s-23-1">アニメ</div>

CSS


div.s-23-1 {
	width: 100px;
	height: 100px;
	margin-left: 100px;
	line-height: 100px;
	font-size: 140%;
	text-align: center;
	background: linear-gradient(90deg, #9bfff5, #013f5d);
	transition-timing-function: ease-out;  
	transition-duration: 1s;
}
.div.s-23-1:hover {
	transform: scale(伸縮の方向と角度);
}

(b) 表示形式

※オンマウス（スマホはタップ）して確認してください。

L11.3.5 transform（skew）（傾斜）


transform: skewX(X軸方向角度);
transform: skewY(Y軸方向角度);
transform: skew(X軸方向角度, Y軸方向角度);

傾斜を指定します。傾斜する角度は、deg で指定します。（90deg = 90度）

角度は、以下の値を指定します。

skewX(X軸方向角度): X 軸方向に指定した角度で傾斜します。
skewY(Y軸方向角度): Y 軸方向に指定した角度で傾斜します。
skew(X軸方向角度, Y軸方向角度): XY 軸方向に指定した角度で傾斜します。

使用上の注意事項

初期値は、none です。
座標変換可能要素に適用できます。
継承しません。
ブラウザの対応状況は、caniuse サイトで確認してください。
プロパティの詳細情報は、mdn web docs サイトで確認してください。

使用例

(1) transform: skew(傾斜の方向と角度);

(a) ソースコード

ソースコード表示

HTML


<div class="s-24-1">アニメ</div>

CSS


div.s-24-1 {
	width: 100px;
	height: 100px;
	margin-left: 100px;
	line-height: 100px;
	font-size: 140%;
	text-align: center;
	background: linear-gradient(90deg, #9bfff5, #013f5d);
	transition-timing-function: ease-out;  
	transition-duration: 1s;
}
.div.s-24-1:hover {
	transform: skew(傾斜の方向と角度);
}

(b) 表示形式

※オンマウス（スマホはタップ）して確認してください。

L11.3.6 transform-origin プロパティ（原点の設定）


transform-origin: 原点;

要素を変形（transform）する時の原点を指定します。原点は、top、bottom、left、right、center、百分率（%）、ピクセル値（px）などで指定します。

原点は指定する値の個数により以下の意味になります。

1 個の場合: 水平方向のオフセットを指定します。
2 個の場合: 水平方向のオフセットと垂直方向のオフセットをスペースで区切って指定します。
3 個の場合: 水平方向のオフセットと垂直方向のオフセットとZ オフセットをスペースで区切って指定します。Z オフセットは、ピクセル値で指定する必要があります。

使用上の注意事項

初期値は、50% 50% 0 です。
座標変換可能要素に適用できます。
継承しません。
ブラウザの対応状況は、caniuse サイトで確認してください。
プロパティの詳細情報は、mdn web docs サイトで確認してください。

L11.4 @keyframes（動きの制御規則）

L11.4.1 @keyframes 記述型式

アニメーションの開始から終了までの動きの制御規則を指定します。実際の適用は、animetion プロパティで指定します。

from / toで指定: アニメーションの開始（from）から終了（to）までの動きを指定します。
百分率（%）で指定: アニメーションの開始（0%）から終了（100%）までの動きを指定します。25% や 50% など細かく指定することができます。

from / to で指定

CSS


@keyframes （名前） {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

from / to で指定

CSS


@keyframes （名前） {
	0% {
		opacity: 1;
	}
	70% {
		opacity: 0.5;
	}
	100% {
		opacity: 0;
	}
}

L11.5 animation（アニメーション実施）

L11.5.1 animation 関連プロパティ

animation 関連プロパティは、アニメーションの実施（@keyframesの適用）を指定します。transition と同様の機能もありますがより細かい動きを実装することが可能です。

animation 関連プロパティには、以下の種類があります。

animation-name プロパティ: アニメーションの名前を指定します。
animation-duration プロパティ: アニメーションの時間を指定します。
animation-timing-function プロパティ: アニメーションの変化の仕方を指定します。
animation-delay プロパティ: アニメーションの開始するまでの遅延時間を指定します。
animation-iteration-count プロパティ: アニメーションの繰り返し回数を指定します。
animation-direction プロパティ: アニメーションの再生方向を指定します。
animation-fill-mode プロパティ: アニメーションの開始前、終了後のスタイルを指定します。
animation-play-state プロパティ: アニメーションの再生・停止を指定します。
animation プロパティ: animation 関連プロパティを一括で指定します。

L11.5.2 animation-name（アニメーション名指定）

animation-name: アニメーション名;

アニメーションの名前（@keyframesでつけた名前）を指定します。

使用上の注意事項

初期値は、none です。
すべての要素に適用できます。
継承しません。
ブラウザの対応状況は、caniuse サイトで確認してください。
プロパティの詳細情報は、mdn web docs サイトで確認してください。

使用例

animation-name: key01;

L11.5.3 animation-duration（変化の時間）

animation-duration: 変化の時間;

アニメーションの開始から終了までの時間を指定します。時間の単位は秒（s）またはミリ秒（ms）で指定します。初期値は、0s です。

使用上の注意事項

初期値は、0s です。
すべての要素に適用できます。
継承しません。
ブラウザの対応状況は、caniuse サイトで確認してください。
プロパティの詳細情報は、mdn web docs サイトで確認してください。

使用例

(1) animation-duration: 開始から終了までの時間;

(a) ソースコード

ソースコード表示

HTML


<div class="s-31-1">アニメ</div>

CSS


@keyframes s-31-key {
	0% {
		left: 0;
	}
	100% {
		left: calc(100% - 100px);
	}
}
.s-31-1 {
	display: inline-block;
	width: 100px;
	height: 100px;
	line-height: 100px;
	font-size: 140%;
	text-align: center;
	background: #88DFF2;
	position: relative;
	animation-name: s-31-key;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-duration: 開始から終了までの時間;
}

(b) 表示形式

※リロード（再描画）して確認してください。

リロード

L11.5.4 animation-timing-function（変化の仕方）

animation-timing-function: 変化の仕方;

アニメーションの変化の仕方を指定するプロパティです。

変化の仕方は、以下の値で指定します。

ease: 開始時と終了時は緩やかに変化します。
linear: 開始から終了まで一定に変化します。
ease-in: 開始時は緩やかに、終了時は早く変化します。
ease-out: 開始時は早く、終了時は緩やかに変化します。
step-start: 開始時に最終の状態になります。
step-end: 終了時に最終の状態になります。
steps: 指定した値で段階的に変化します。

stepsの指定方法は、以下の通りです。

steps(ステップ数, ディレクション)

ステップ数: 変化するステップ数を指定します。
ディレクション: アニメーションジャンプの発生を指定します。

ディレクション（ジャンプ）の指定値は、以下の通りです。

jump-start: アニメーションの開始時に最初のジャンプが発生
jump-end: アニメーションの最後時に最後のジャンプが発生
jump-none: どちらもジャンプは未発生（0% と 100% の位置でそれぞれの1/n間隔を保持）
start: jump-start と同様
end: jump-end と同様
step-start: steps(1, jump-start) と同様
step-end: steps(1, jump-end) と同様

使用上の注意事項

初期値は、ease です。
すべての要素に適用できます。
継承しません。
ブラウザの対応状況は、caniuse サイトで確認してください。
プロパティの詳細情報は、mdn web docs サイトで確認してください。

使用例

(1) animation-timing-function: 変化の仕方;

(a) ソースコード

ソースコード表示

HTML


<div class="s-32-1">アニメ</div>

CSS


@keyframes s-32-key {
	0% {
		left: 0;
	}
	100% {
		left: calc(100% - 100px);
	}
}
.s-32-1 {
	display: inline-block;
	width: 100px;
	height: 100px;
	line-height: 100px;
	font-size: 140%;
	text-align: center;
	background: #88DFF2;
	position: relative;
	animation-name: s-32-key;
	animation-iteration-count: infinite;
	animation-timing-function: 変化の仕方;
	animation-duration: 3s;
}

(b) 表示形式

※リロード（再描画）して確認してください。

リロード

L11.5.5 animation-delay（変化の遅延時間）

animation-delay: 変化の遅延時間;

アニメーションの開始するまでの遅延時間を指定します。時間の単位は秒（s）またはミリ秒（ms）で指定します。初期値は、0s です。

使用上の注意事項

初期値は、0s です。
すべての要素に適用できます。
継承しません。
ブラウザの対応状況は、caniuse サイトで確認してください。
プロパティの詳細情報は、mdn web docs サイトで確認してください。

使用例

(1) animation-delay: 開始するまでの遅延時間;

(a) ソースコード

ソースコード表示

HTML


<div class="s-33-1">アニメ</div>

CSS


@keyframes s-33-key {
	0% {
		left: 0;
	}
	100% {
		left: calc(100% - 100px);
	}
}
.s-33-1 {
	display: inline-block;
	width: 100px;
	height: 100px;
	line-height: 100px;
	font-size: 140%;
	text-align: center;
	background: #88DFF2;
	position: relative;
	animation-name: s-33-key;
	animation-iteration-count: infinite;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-delay: 変化の遅延時間;
}

(b) 表示形式

※リロード（再描画）して確認してください。

リロード

L11.5.6 animation-iteration-count（繰り返し回数）

animation-iteration-count: 繰り返し回数;

アニメーションの繰り返し回数を指定します。初期値は、1 です。無限に繰り返す場合は値に infinite を指定します。

使用上の注意事項

初期値は、1 です。
すべての要素に適用できます。
継承しません。
ブラウザの対応状況は、caniuse サイトで確認してください。
プロパティの詳細情報は、mdn web docs サイトで確認してください。

使用例

(1) animation-iteration-count: 繰り返し回数;

(a) ソースコード

ソースコード表示

HTML


<div class="s-34-1">アニメ</div>

CSS


@keyframes s-34-key {
	0% {
		left: 0;
	}
	100% {
		left: calc(100% - 100px);
	}
}
.s-34-1 {
	display: inline-block;
	width: 100px;
	height: 100px;
	line-height: 100px;
	font-size: 140%;
	text-align: center;
	background: #88DFF2;
	position: relative;
	animation-name: s-34-key;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-iteration-count: 繰り返し回数;
}

(b) 表示形式

※リロード（再描画）して確認してください。

リロード

L11.5.7 animation-direction（再生方向）

animation-direction: 再生方向;

アニメーションの再生方向を指定するプロパティです。

再生方向は、以下の値で指定します。

normal: 毎回、順方向から再生します。
reverse: 毎回、逆方向から再生します。
alternate: 毎回反転させ、初回は順方向から再生します。
alternate-reverse: 毎回反転させ、初回は逆方向から再生します。

使用上の注意事項

初期値は、normal です。
すべての要素に適用できます。
継承しません。
ブラウザの対応状況は、caniuse サイトで確認してください。
プロパティの詳細情報は、mdn web docs サイトで確認してください。

使用例

(1) animation-direction: 再生方向;

(a) ソースコード

ソースコード表示

HTML


<div class="s-35-1">アニメ</div>

CSS


@keyframes s-35-key {
	0% {
		left: 0;
	}
	100% {
		left: calc(100% - 100px);
	}
}
.s-35-1 {
	display: inline-block;
	width: 100px;
	height: 100px;
	line-height: 100px;
	font-size: 140%;
	text-align: center;
	background: #88DFF2;
	position: relative;
	animation-name: s-35-key;
	animation-iteration-count: infinite;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-direction: ＜再生方向＞;
}

(b) 表示形式

※リロード（再描画）して確認してください。

リロード

L11.5.8 animation-fill-mode（開始前・終了後スタイル）

animation-fill-mode: 開始前・終了後スタイル;

アニメーションの開始前、終了後のスタイルを指定するプロパティです。

開始前・終了後スタイルは、以下の値を指定します。

none: スタイルを指定しません。再生後は元のスタイルを適用します。遅延時間（animation-delay）を指定している場合の遅延中は元のスタイルを適用します。
forwards: 再生後は最後のキーフレーム（100%）のスタイルを適用します。遅延時間（animation-delay）を指定している場合の遅延中は元のスタイルを適用します。
backwards: 再生後は元のスタイルを適用します。遅延時間（animation-delay）を指定している場合の遅延中は最初のキーフレーム（0%）のスタイルを適用します。
both: 再生後は最後のキーフレーム（100%）のスタイルを適用します。遅延時間（animation-delay）を指定している場合の遅延中は最初のキーフレーム（0%）のスタイルを適用します。

使用上の注意事項

初期値は、none です。
すべての要素に適用できます。
継承しません。
ブラウザの対応状況は、caniuse サイトで確認してください。
プロパティの詳細情報は、mdn web docs サイトで確認してください。

使用例

(1) animation-fill-mode: 開始前・終了後のスタイル;

(a) ソースコード

ソースコード表示

HTML


<div class="s-36-1">アニメ</div>

CSS


@keyframes s-36-key {
	0% {
		left: 0;
		background: #00ff00;	/* 緑 */
	}
	100% {
		left: calc(100% - 100px);
		background: #0000ff;	/* 青 */
	}
}
.s-36-1 {
	display: inline-block;
	width: 100px;
	height: 100px;
	line-height: 100px;
	font-size: 140%;
	text-align: center;
	background: #ff0000;		/* 赤 */
	color: #ffffff;
	position: relative;
	animation-name: s-36-key;
	animation-iteration-count: infinite;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-delay: 2s;
	animation-fill-mode: 開始前・終了後のスタイル;
}

(b) 表示形式

※背景色は「元のスタイル：赤、0%時のスタイル：緑、100%時のスタイル：青」に設定
※遅延時間（animation-delay）を「2秒間」に設定

※リロード（再描画）して確認してください。

リロード

L11.5.9 animation-play-state（再生・停止）

animation-play-state: 再生・停止;

アニメーションの再生・停止を指定するプロパティです。

再生・停止は、以下の値で指定します。

running: アニメーションが実行中になります。
paused: アニメーションが停止中になります。

使用上の注意事項

初期値は、running です。
すべての要素に適用できます。
継承しません。
ブラウザの対応状況は、caniuse サイトで確認してください。
プロパティの詳細情報は、mdn web docs サイトで確認してください。

使用例

(1) animation-play-state: 再生・停止;

(a) ソースコード

ソースコード表示

HTML


<div class="s-37-1">アニメ</div>

CSS


@keyframes s-37-key {
	0% {
		left: 0;
	}
	100% {
		left: calc(100% - 100px);
	}
}
.s-37-1 {
	display: inline-block;
	width: 100px;
	height: 100px;
	line-height: 100px;
	font-size: 140%;
	text-align: center;
	background: #88DFF2;
	position: relative;
	animation-name: s-37-key;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-play-state: running;
}
.s-37-1:hover {
	animation-play-state: paused;
}

(b) 表示形式

※オンマウス（スマホはタップ）して確認してください。

L11.5.10 animation（アニメーション実施一括指定）

animetion: 名前 変化の時間 変化の仕方 開始時間の遅延 繰り返し 再生方向 開始後のスタイル 再生・停止;

ショートハンドプロパティであり animation 関連プロパティを一括で指定します。

名前: animation-name の値を指定します。
変化の時間: animation-duration の値を指定します。
変化の仕方: animation-timing-function の値を指定します。
開始時間の遅延: animation-delay の値を指定します。
繰り返し: animation-iteration-count の値を指定します。
再生方向: animation-direction の値を指定します。
開始後のスタイル: animation-fill-mode の値を指定します。
再生・停止: animation-play-state の値を指定します。

使用上の注意事項

ブラウザの対応状況は、caniuse サイトで確認してください。
プロパティの詳細情報は、mdn web docs サイトで確認してください。

使用例

animetion: key01 1s linear 1s infinite alternate both running;

L11.5.11 animation-composition（プロパティ値の演算方法）

animation-composition: 演算方法;

アニメーションの時のプロパティ値の演算方法をを指定するプロパティです。

演算方法は、以下の値を指定します。

replace: 指定されたプロパティ値を置き換えます。
add: 基礎置に指定されたプロパティ値を加算します。
accumulate: 基礎値に指定されたプロパティ値を累積します。

使用上の注意事項

初期値は、replace です。
すべての要素に適用できます。
継承しません。
ブラウザの対応状況は、caniuse サイトで確認してください。
プロパティの詳細情報は、mdn web docs サイトで確認してください。

使用例

(1) animation-composition: 演算方法;

(a) ソースコード

ソースコード表示

HTML


<div class="s-38-1">アニメ</div>

CSS


@keyframes s-38-key {
	0% {
		transform: scale(0.5);
		left: 0;
		rotate(0deg);
		background: #f00;		/* 赤 */
	}
	50% {
		transform: scale(1);
		background: #0f0;		/* 緑 */
	}
	100% {
		left: calc(100% - 100px);
		transform: scale(0.5);
		background: #00f;		/* 青 */
	}
}
.s-38-1 {
	display: inline-block;
	width: 100px;
	height: 100px;
	line-height: 100px;
	font-size: 140%;
	text-align: center;
	background: #00f;			/* 青 */
	position: relative;
	transform: scale(0.5) rotate(45deg);
	animation-name: s-38-key;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-duration: 3s;
}
.s-38-1 {
	animation-composition: 演算方法;
}

(b) 表示形式

※背景色は「元のスタイル：青、0%時のスタイル：赤、50%時のスタイル：緑、100%時のスタイル：青」に設定
※角度は「元のスタイル：45度、0%時のスタイル：0度、50%時のスタイル：指定なし、100%時のスタイル：指定なし」に設定
※拡大率は「元のスタイル：0.5、0%時のスタイル：0.5、50%時のスタイル：1、100%時のスタイル：0.5」に設定

※リロード（再描画）して確認してください。

リロード

L11.6 サンプル

L11.6.1 写真ギャラリーでオンマウス時に写真を拡大

(1) 概要

flexbox（display: flex;）で横方向に 5 枚の写真ギャラリーを作成
オンマウス時に 1 秒かけてボーダー付加と縦横 2 倍の拡大を実施

(2) ソースコード

ソースコード表示

HTML


<div class="s-a1-1">
	<div><img src="images/animetion-150-EU002.jpg" alt="150-EU002.jpg"></div>
	<div><img src="images/animetion-250-AA072.jpg" alt="250-AA072.jpg"></div>
	<div><img src="images/animetion-250-AA185.jpg" alt="250-AA185.jpg"></div>
	<div><img src="images/animetion-250-AA226.jpg" alt="250-AA226.jpg"></div>
	<div><img src="images/animetion-250-AA234.jpg" alt="250-AA234.jpg"></div>
	<div><img src="images/animetion-250-AA369.jpg" alt="250-AA369.jpg"></div>
	<div><img src="images/animetion-250-AC248.jpg" alt="250-AC248.jpg"></div>
	<div><img src="images/animetion-250-AD167.jpg" alt="250-AD167.jpg"></div>
	<div><img src="images/animetion-250-AD431.jpg" alt="250-AD431.jpg"></div>
	<div><img src="images/animetion-250-AE003.jpg" alt="250-AE003.jpg"></div>
	<div><img src="images/animetion-250-AE397.jpg" alt="250-AE397.jpg"></div>
	<div><img src="images/animetion-250-AE510.jpg" alt="250-AE510.jpg"></div>
	<div><img src="images/animetion-250-AF008.jpg" alt="250-AF008.jpg"></div>
	<div><img src="images/animetion-250-AF353.jpg" alt="250-AF353.jpg"></div>
	<div><img src="images/animetion-250-AF458.jpg" alt="250-AF458.jpg"></div>
	<div><img src="images/animetion-250-AF468.jpg" alt="250-AF468.jpg"></div>
	<div><img src="images/animetion-250-AF533.jpg" alt="250-AF533.jpg"></div>
	<div><img src="images/animetion-250-AF582.jpg" alt="250-AF582.jpg"></div>
	<div><img src="images/animetion-250-HN015.jpg" alt="250-HN015.jpg"></div>
	<div><img src="images/animetion-250-NG001.jpg" alt="250-NG001.jpg"></div>
</div>

CSS


.s-a1-1 {
	display: flex;
	flex-wrap: wrap;
	padding: 8%;
	margin: 0;
}
.s-a1-1 > div {
	flex-basis: 20%;
}
.s-a1-1 > div:hover {
	transform: scale(2.0, 2.0);
	transition-duration: 1s;
}
.s-a1-1 > div > img {
	width: 100%;
	vertical-align: bottom;
}

(3) 表示形式

※オンマウス（スマホはタップ）して確認してください。

L11.6.2 ローディングなどで使用される待ち状態アイコン

(1) 概要

円周上の 8 箇所に box-shadow を使用して濃さの違う円を配置
1 秒かけて時計方向の 360 度回転を8ステップで無限に実施

(2) ソースコード

ソースコード表示

HTML


<div class="s-a2-1">
	<div class="s-a2-2"></div>
</div>

CSS


.s-a2-1 {
	display: flex;
	height: 200px;
	justify-content: center;
	align-items: center;
	margin: 0;
}
@keyframes s-a2-key {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
.s-a2-2 {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	box-shadow:
		0 -60px 0 #eee,			/*  上  */
		42px -42px 0 #ddd,		/* 右上 */
		60px 0 0 #ccc,			/*  右  */
		42px 42px 0 #bbb,		/* 右下 */
		0 60px 0 #aaa,			/*  下  */
		-42px 42px 0 #999,		/* 左下 */
		-60px 0 0 #666,			/*  左  */
		-42px -42px 0 #000;		/* 左上 */
	animation-name: s-a2-key;
	animation-duration: 1s;
	animation-timing-function: steps(8);
	animation-iteration-count: infinite;
}

(3) 表示形式

L11.6.3 肉球が歩くアニメーション

(1) 概要

肉球画像を上下に配置（右足は一歩先（右側へ 1/12）に配置）
10 秒かけて右方向に12ステップ（12 歩）の移動（左マージンを変化）
右足の開始時間は左足より半歩（0.42 秒）の遅延を実施
上記を無限に繰り返し

(2) ソースコード

ソースコード表示

HTML


	<div class="amine-a3-01">
		<div class="s-a3-11">
			<div class="s-a3-12"><img src="images/animetion-foot-l.png" alt="左足"></div>
		</div>
		<div class="s-a3-21">
			<div class="s-a3-22"><img src="images/animetion-foot-r.png" alt="右足"></div>
		</div>
	</div>

CSS


.s-a3-01 {
	overflow: hidden;
}
@keyframes s-a3-1-key {
	0% {
		left: 0px;
	}
	100% {
		left: 100%;
	}
}
.s-a3-11 {
	width: calc(100% - 100% / 24);
	margin-left: 0;
}
.s-a3-12 {
	display: inline-block;
	position: relative;
	animation-name: s-a3-1-key;
	animation-iteration-count: infinite;
	animation-duration: 10s;
	animation-timing-function: steps(12);
}
.s-a3-12 img {
	width: 40px;
}
@keyframes s-a3-2-key {
	0% {
		left: 0px;
	}
	100% {
		left: 100%;
	}
}
.s-a3-21 {
	width: calc(100% - 100% / 24);
	margin-left: calc(100% / 24);
}
.s-a3-22 {
	display: inline-block;
	position: relative;
	animation-name: s-a3-2-key;
	animation-iteration-count: infinite;
	animation-duration: 10s;
	animation-timing-function: steps(12);
	animation-delay: 0.42s;
}
.s-a3-22 img {
	width: 40px;
}

(3) 表示形式

※リロード（再描画）して確認してください。

リロード

L11.6.4 イメージからバックグランドイメージに遷移

(1) 概要

スタイルシートでバックグランドイメージを配置し上位のイメージを img タグで配置
5 秒かけて上位のイメージを非透過から 100% 透過に変化（終了時状態を保持）

(2) ソースコード

ソースコード表示

HTML


<div class="s-a4-1">
	<img src="images/animetion-250-AE397.jpg" alt="animetion-250-AE397.jpg">
</div>

CSS


@keyframes s-a4-key {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
.s-a4-1 {
	background-image: url(images/animetion-250-NG001.jpg);
	background-size: 100%;
}
.s-a4-1 img {
	width: 100%;
	animation-name: s-a4-key;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	vertical-align: top;
}

(3) 表示形式

※リロード（再描画）して確認してください。

リロード

L11.6.5 イメージを切り替え後に文字表示

(1) 概要

イメージ 2 枚と文字 2 枚を position タグを使用して同一の場所に配置
- 下から「① 変化後イメージ、② 変化前イメージ、③ 文言1、④ 文言2」で配置
- 「③ 文言1、④ 文言2」は100%透過状態で配置
5秒かけて「② 変化前イメージ」を非透過から 100% 透過に変化（終了時状態を保持）
5秒遅れて「③ 文言1」を 100% 透過から非透過に変化（終了時状態を保持）
9秒遅れて「④ 文言2」を 100% 透過から非透過に変化（終了時状態を保持）

(2) ソースコード

ソースコード表示

HTML


<div class="s-a5-1">
	<div class="s-a5-1-1"><img src="images/animetion-250-AF353.jpg" alt="250-AF353.jpg"></div>
	<div class="s-a5-1-2"><img src="images/animetion-250-AA185.jpg" alt="250-AA185.jpg"></div>
	<div class="s-a5-1-3">
		<p>
			HTMLでマークアップ<br>
			CSSでスタイルデザイン<br>
			<span>Webサイトを作ろう</span>
		</p>
	</div>
</div>

CSS


.s-a5-1 {
	position: relative;
}
.s-a5-1 div {
	width: 100%;
}
.s-a5-1 div img {
	width: 100%;
	vertical-align: top;
}
.s-a5-1-1 {
}
.s-a5-1-1 img {
	width: 100%;
	vertical-align: top;
}
@keyframes s-a5-1-2-key {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
.s-a5-1-2 {
	position: absolute;
	top: 0;
	animation-name: s-a5-1-2-key;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.s-a5-1-2 img {
	width: 100%;
	vertical-align: top;
}
@keyframes s-a5-1-3-key {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.s-a5-1-3 {
	position: absolute;
	bottom: 50px;
	left: 0px;
	opacity: 0;
	animation-name: s-a5-1-3-key;
	animation-duration: 4s;
	animation-timing-function: linear;
	animation-delay: 5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.s-a5-1-3 p {
	width: 4vw;
	font-size: 200%;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
}
.s-a5-1-3 p span {
	font-size: 6vw;
	opacity: 0;
	animation-name: s-a5-1-3-key;
	animation-duration: 4s;
	animation-timing-function: linear;
	animation-delay: 9s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

(3) 表示形式

※リロード（再描画）して確認してください。

リロード

PAGE
TOP

Lesson-11 CSS アニメーションを活用しましょう

目次

L11.1 はじめに

L11.1.1 概要

L11.2 transition（適用対象と時間）

L11.2.1 transition 関連プロパティ

L11.2.2 transition-property（変化の適用対象）

使用上の注意事項

使用例

L11.2.3 transition-duration（変化の時間）

使用上の注意事項

使用例

(1) transition-duration: 変化の時間;

(a) ソースコード

(b) 表示形式

L11.2.4 transition-delay（変化の遅延時間）

使用上の注意事項

使用例

(1) transition-delay: 変化の遅延時間;

(a) ソースコード

(b) 表示形式

L11.2.5 transition-timing-function（変化の仕方）

使用上の注意事項

使用例

(1) transition-timing-function: 変化の仕方;

(a) ソースコード

(b) 表示形式

L11.2.6 transition（適用対象と時間一括指定）

使用上の注意事項

使用例

L11.3 transform（変形する形態）

L11.3.1 transform 関連プロパティ

L11.3.2 transform（translate）（移動）

使用上の注意事項

使用例

(1) transform: translate(移動後の位置);

(a) ソースコード

(b) 表示形式

L11.3.3 transform（rotate）（回転）

使用上の注意事項

使用例

(1) transform: rotate(回転の方向と角度);

(a) ソースコード

(b) 表示形式

L11.3.4 transform（scale）（伸縮）

使用上の注意事項

使用例

(1) transform: scale(伸縮の方向と角度);

(a) ソースコード

(b) 表示形式

L11.3.5 transform（skew）（傾斜）

使用上の注意事項

使用例

(1) transform: skew(傾斜の方向と角度);

(a) ソースコード

(b) 表示形式

L11.3.6 transform-origin プロパティ（原点の設定）

使用上の注意事項

L11.4 @keyframes（動きの制御規則）

L11.4.1 @keyframes 記述型式

from / to で指定

from / to で指定

L11.5 animation（アニメーション実施）

L11.5.1 animation 関連プロパティ

L11.5.2 animation-name（アニメーション名指定）

使用上の注意事項

使用例

L11.5.3 animation-duration（変化の時間）

使用上の注意事項

使用例

(1) animation-duration: 開始から終了までの時間;

(a) ソースコード

(b) 表示形式

L11.5.4 animation-timing-function（変化の仕方）

使用上の注意事項

使用例

(1) animation-timing-function: 変化の仕方;

(a) ソースコード

(b) 表示形式

L11.5.5 animation-delay（変化の遅延時間）

Lesson-11
CSS アニメーションを活用しましょう