HTML-CSS入門講座

濱屋太郎

Lesson-10

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

目次

10.1 はじめに

10.1.1 概要

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

10.2 プロパティ一覧

10.2.1 CSSアニメーション関連プロパティ

transition
アニメーションの変化の適用対象と時間を指定します。
transform
アニメーションの変形する形態(移動、回転、伸縮、傾斜)を指定すします。
@keyflame
アニメーションの開始から終了までの動きの制御規則を指定します。
animation
アニメーションの実施(@keyframesの適用)を指定します。

10.2.2 transition(適用対象と時間)

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

(1) transition-property(変化の適用対象)

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

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

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

all(初期値)
transitionが適用できるプロパティを全て指定できます。
特定のプロパティ

指定したプロパティだけが対象になります。

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

使用例

transition-property: background-color;

(2) transition-duration(変化の時間)

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

変化の開始から終了までの時間を指定するプロパティです。時間の単位は秒(s)またはミリ秒(ms)で指定します。初期値は「0s」で、この場合は変化はしません。

開始から終了まで3秒間かけて変化させる時は以下のように指定します。

使用例

transition-duration: 3s;

(3) transition-delay(変化の遅延時間)

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

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

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

使用例

transition-delay: 2s;

(4) transition-timing-function(変化の仕方)

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

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

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

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

使用例

transition-timing-function:: linear;

(5) transition(適用対象と時間一括指定)

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

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

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

使用例

transition: background-color 3s 2s linear;

10.2.3 transform(変形する形態)

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

(1) transform(translate)(移動)


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

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

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

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

使用例


transform: translateX(100px);
transform: translateY(-100px);
transform: translate(100px, -100px);

(2) transform(rotate)(回転)


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

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

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

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

使用例


transform: rotate(90deg);
transform: rotate(-180deg);
transform: rotateX(180deg);
transform: rotateY(180deg);

(3) transform(scale)(伸縮)


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

伸縮を指定します。伸縮は元の大きさを「1」として比率(数値)で指定します。

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

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

使用例


transform: scaleX(0.5);
transform: scaleX(1.5);
transform: scaleY(1.5);
transform: scale(1.5, 1.5);

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

使用例


transform: skewX(25deg);
transform: skewY(25deg);
transform: skew(25deg, 25deg);

10.2.4 @keyframes(動きの制御規則)

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

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

(1) from / toで指定

CSS


@keyframes (名前) {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

(2) 百分率(%)で指定

CSS


@keyframes (名前) {
	0% {
		opacity: 1;
	}
	70% {
		opacity: 0.5;
	}
	100% {
		opacity: 0;
	}
}

10.2.5 animation(アニメーション実施)

アニメーションの実施(@keyframesの適用)を指定します。「transition」と同様の機能もありますがより細かい動きを実装することが可能です。

(1) animation-name(アニメーション名指定)

animation-name: (アニメーション名指定);

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

使用例

animation-name: key01;

(2) animation-duration(変化の時間)

animation-duration: (変化の時間);

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

使用例

animation-duration: 1s;

(3) 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)と同様

使用例

transition-timing-function: linear;

(4) animation-delay(変化の遅延時間)

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

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

使用例

animation-delay: 1s;

(5) animation-iteration-count(繰り返し回数)

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

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

使用例

animation-iteration-count: infinite;

(6) animation-direction(再生方向)

animation-direction: (再生方向);

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

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

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

使用例

animation-direction: alternate;

(7) animation-fill-mode(開始前・終了後スタイル)

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

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

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

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

使用例

animation-fill-mode: both;

(8) animation-play-state(再生・停止)

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

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

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

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

使用例

animation-play-state: paused;

(9) 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;

10.3 表示例:transition(適用対象と時間)

10.3.1 transition-duration(変化の時間)

アニメーションの変化の開始から終了までの時間を指定します。

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%;
}

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

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

アニメ

transition-duration: 3s;(開始時から終了までの時間:3秒)

アニメ

10.3.2 transition-delay(変化の遅延時間)

アニメーションの変化が開始するまでの遅延時間を指定します。

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%;
}

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

transition-delay: 1s;(変化が開始するまでの遅延時間:1秒)

アニメ

transition-delay: 3s;(変化が開始するまでの遅延時間:3秒)

アニメ

10.3.3 transition-timing-function(変化の仕方)

アニメーションの変化の仕方を指定します。

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%;
}

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

transition-timing-function: ease;(開始時と終了時は緩やかに変化:初期値)

アニメ

transition-timing-function: linear;(開始から終了まで一定に変化)

アニメ

transition-timing-function: ease-in;(開始時は緩やかに、終了時は早く変化)

アニメ

transition-timing-function: ease-out:(開始時は早く、終了時は緩やかに変化)

アニメ

10.4 表示例:transform(変形する形態)

10.4.1 translate(移動)

移動のアニメーションを指定します。

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 {
	translate: <移動後の位置>;
}

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

transform: translateX(100px);(X軸方向に移動:100px)

アニメ

transform: translateX(-100px);(X軸方向に移動:-100px)

アニメ

transform: translateY(100px);(Y軸方向に移動:100px)

アニメ

transform: translateY(-100px);(Y軸方向に移動:-100px)

アニメ

transform: translate(100px, -100px);(XY軸方向に移動:100px, -100px)

アニメ

10.4.2 rotate(回転)

回転のアニメーションを指定します。

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(<回転の方向と角度>);
}

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

transform: rotate(90deg);(時計方向に回転:90度)

アニメ

transform: rotate(180deg);(時計方向に回転:180度)

アニメ

transform: rotate(-180deg);(反時計方向に回転:-180度)

アニメ

transform: rotateX(180deg);(X軸方向に回転:180度)

アニメ

transform: rotateY(180deg);(Y軸計方向に回転:180度)

アニメ

10.4.3 scale(伸縮)

伸縮のアニメーションを指定します。

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(<伸縮の方向と角度>);
}

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

transform: scaleX(0.5);(X軸方向に伸縮:0.5倍)

アニメ

transform: scaleX(1.5);(X軸方向に伸縮:1.5倍)

アニメ

transform: scaleY(1.5);(Y軸方向に伸縮:1.5倍)

アニメ

transform: scale(1.5, 1.5);(XY軸方向に伸縮:1.5倍, 1.5倍)

アニメ

10.4.4 skew(傾斜)

傾斜のアニメーションを指定します。

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(<傾斜の方向と角度>);
}

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

transform: skewX(25deg);(X軸方向に傾斜:25度)

アニメ

transform: skewX(-25deg);(X軸方向に傾斜:-25度)

アニメ

transform: skewY(25deg);(Y軸方向に傾斜:25度)

アニメ

transform: skew(25deg, 25deg);(XY軸方向に傾斜:25度, 25度)

アニメ

10.5 表示例:animation(アニメーションの実施)

10.5.1 animation-duration(変化の時間)

アニメーションの開始から終了までの時間を指定します。

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: <開始から終了までの時間>;
}

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

アニメ

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

アニメ

10.5.2 animation-timing-function(変化の仕方)

アニメーションの変化の仕方を指定します。

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;
}

animation-timing-function: ease;(開始時と終了時は緩やかに変化(初期値))

アニメ

animation-timing-function: linear;(開始から終了まで一定に変化)

アニメ

animation-timing-function: ease-in;(開始時は緩やかに、終了時は早く変化)

アニメ

animation-timing-function: ease-out;(開始時は早く、終了時は緩やかに変化)

アニメ

animation-timing-function: steps;(指定した値で段階的に変化:10, start)

アニメ

10.5.3 animation-delay(変化の遅延時間)

アニメーションが開始するまでの遅延時間を指定します。

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: <開始するまでの遅延時間>;
}

※画面をリロード(再読み込み)して確認してください。 リロード

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

アニメ

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

アニメ

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

アニメ

10.5.4 animation-iteration-count(繰り返し回数)

アニメーションの繰り返し回数を指定します。

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: <繰り返し回数>;
}

※画面をリロード(再読み込み)して確認してください。 リロード

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

アニメ

animation-iteration-count: infinite;(繰り返し回数:infinite(無限))

アニメ

10.5.5 animation-direction(再生方向)

アニメーションの再生方向を指定します。

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: <再生方向>;
}

※画面をリロード(再読み込み)して確認してください。 リロード

animation-direction: normal;(毎回、順方向(初期値))

アニメ

animation-direction: reverse;(毎回、逆方向)

アニメ

animation-direction: alternate;(毎回反転させ、初回は順方向)

アニメ

animation-direction: alternate-reverse;(毎回反転させ、初回は逆方向)

アニメ

10.5.6 animation-fill-mode(開始前・終了後スタイル)

アニメーションの開始前、終了後のスタイルを指定します。

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: <開始前・終了後のスタイル>;
}

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

※画面をリロード(再読み込み)して確認してください。 リロード

animation-fill-mode: none;(遅延中は元のスタイル/終了後は元のスタイル(初期値))

アニメ

animation-fill-mode: forwards;(遅延中は元のスタイル/終了後は100%部分のスタイル)

アニメ

animation-fill-mode: backwards;(遅延中は0%部分のスタイル/終了後は0%部分のスタイル)

アニメ

animation-fill-mode: both;(遅延中は0%部分のスタイル/終了後は100%部分のスタイル)

アニメ

10.5.7 animation-play-state(再生・停止)

アニメーションの再生・停止を指定します。

HTML


<div class="s-37-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-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;
}

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

animation-play-state: paused;(オンマウスで停止)

アニメ

10.6 サンプル

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

■ 概要

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

■ 表示形式

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

150-EU002.jpg
250-AA072.jpg
250-AA185.jpg
250-AA226.jpg
250-AA234.jpg
250-AA369.jpg
250-AC248.jpg
250-AD167.jpg
250-AD431.jpg
250-AE003.jpg
250-AE397.jpg
250-AE510.jpg
250-AF008.jpg
250-AF353.jpg
250-AF458.jpg
250-AF468.jpg
250-AF533.jpg
250-AF582.jpg
250-HN015.jpg
250-NG001.jpg

■ ソースコード

ソースコード表示

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;
}

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

■ 概要

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

■ 表示形式

■ ソースコード

ソースコード表示

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;
}

10.6.3 肉球が歩くアニメーション

■ 概要

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

■ 表示形式

左足
右足

■ ソースコード

ソースコード表示

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: 100%;
}
.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: 100%;
	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;
}

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

■ 概要

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

■ 表示形式

※画面をリロード(再読み込み)して確認してください。 リロード

animetion-250-AE397.jpg

■ ソースコード

ソースコード表示

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;
}

10.6.5 イメージを切り替え後に文字表示

■ 概要

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

■ 表示形式

※画面をリロード(再読み込み)して確認してください。 リロード

250-AF353.jpg
250-AA185.jpg

HTMLでマークアップ
CSSでスタイルデザイン
Webサイトを作ろう

■ ソースコード

ソースコード表示

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: 2vw;
	font-size: 200%;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
}
.s-a5-1-3 p span {
	font-size: 4vw;
	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;
}