HTML-CSS 入門講座

HTML-CSS 入門講座

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

Lesson-10
CSS アニメーションで動かしましょう

目次

L10.1 はじめに

L10.1.1 概要

  • CSS アニメーションを使用すると Web サイト上で動きを出すことができます。
  • CSS アニメーションを実現するためには、transition、transform、@keyflame/animation プロパティを使用します。
  • 本レッスンでは、CSS アニメーションの作成方法と合わせて実際の CSS アニメーション活用例を通して CSS アニメーションを使用法を学びます。
  • CSSアニメーションには、以下の分類のプロパティがあります。
    transition
    アニメーションの変化の適用対象と時間を指定します。
    transform
    アニメーションの変形する形態（移動、回転、伸縮、傾斜）を指定すします。
    @keyflame
    アニメーションの開始から終了までの動きの制御規則を指定します。
    animation
    アニメーションの実施（@keyframesの適用）を指定します。

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

L10.2.1 transition 関連プロパティ

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

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

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

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

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

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

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

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

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

使用例

transition-property: background-color;

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

transition-duration: 変化の時間;

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

(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) 表示形式

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

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

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

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

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

(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) 表示形式

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

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

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

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

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

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

(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) 表示形式

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

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

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

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

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

使用例

transition: background-color 3s 2s linear;

10.3 transform（変形する形態）

L10.3.1 transform 関連プロパティ

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

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

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

L10.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 軸方向に指定した幅を移動します。

(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) 表示形式

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

L10.3.3 transform（rotate）（回転）


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

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

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

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

(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) 表示形式

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

L10.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 軸方向に指定した伸縮率で伸縮します。

(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) 表示形式

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

L10.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 軸方向に指定した角度で傾斜します。

(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) 表示形式

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

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


transform-origin: 原点;

要素を変形（transform）する時の原点を指定します。

原点は、top、bottom、left、right、center、百分率（%）、ピクセル値（px）などで x 軸（水平方向）と y 軸（垂直方向）を指定します。初期値は、center です。

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

L10.4.1 @keyframes 記述型式

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

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

L10.4.2 from / to で指定

CSS


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

L10.4.3 百分率（%）で指定

CSS


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

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

L10.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 関連プロパティを一括で指定します。

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

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

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

使用例

animation-name: key01;

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

animation-duration: 変化の時間;

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

(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) 表示形式

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

リロード

L10.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) と同様

(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) 表示形式

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

リロード

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

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

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

(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) 表示形式

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

リロード

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

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

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

(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) 表示形式

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

リロード

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

animation-direction: 再生方向;

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

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

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

(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) 表示形式

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

リロード

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

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

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

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

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

(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秒間」に設定

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

リロード

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

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

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

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

running（初期値）
アニメーションが実行中になります。
paused
アニメーションが停止中になります。

(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) 表示形式

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

L10.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 の値を指定します。

使用例

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

L10.6 サンプル

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

(1) 概要

  1. flexbox（display: flex;）で横方向に 5 枚の写真ギャラリーを作成
  2. オンマウス時に 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) 表示形式

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

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

(1) 概要

  1. 円周上の 8 箇所に box-shadow を使用して濃さの違う円を配置
  2. 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) 表示形式

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

(1) 概要

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

(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) 表示形式

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

リロード

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

(1) 概要

  1. スタイルシートでバックグランドイメージを配置し上位のイメージを img タグで配置
  2. 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) 表示形式

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

リロード

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

(1) 概要

  1. イメージ 2 枚と文字 2 枚を position タグを使用して同一の場所に配置
    • 下から「① 変化後イメージ、② 変化前イメージ、③ 文言1、④ 文言2」で配置
    • 「③ 文言1、④ 文言2」は100%透過状態で配置
  2. 5秒かけて「② 変化前イメージ」を非透過から 100% 透過に変化（終了時状態を保持）
  3. 5秒遅れて「③ 文言1」を 100% 透過から非透過に変化（終了時状態を保持）
  4. 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
ロケット炎