CSSアニメーションを理解しましょう！

CSSアニメーションとは

• CSSアニメーションを使用するとWebサイト上で動きを出すことができます。
• CSSアニメーションを実現するためには、transition、transform、@keyflame/animationを使用します。

アニメーションが印象に残るサイト

• 株式会社ノースグラフィック
• LIONS GOOD NEWS 2020
• Home | Strategy & Video | Animus Studios
• Inside the Mind of Samuel Day

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

transition

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

transform

変形する形態（移動、回転、伸縮、傾斜）を指定すします。

@keyflame

アニメーションの開始から終了までの動きの制御規則を指定します。

animation

@keyframesの適用を指定します。

transition

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

transition-property

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

all（初期値）

transitionが適用できるプロパティを全て指定できます。

特定のプロパティ

指定したプロパティだけが対象になります。
例えばback-groundcolorだけを対象にしたい時は以下のように指定します。
（例）transition-property: background-color;

transition-duration

変化の開始から終了までの時間を指定するプロパティです。
時間の単位は秒(s)またはミリ秒(ms)で指定します。
初期値は「0s」で、この場合は変化はしません。
開始から終了まで3秒間かけて変化させる時は以下のように指定します。
（例）transition-duration: 3s;
 

transition-delay

変化が開始するまでの遅延時間を指定します。
時間の単位は秒(s)またはミリ秒(ms)で指定します。
初期値は「0s」で、この場合は遅延することなくすぐに開始されます。
開始から2秒遅延させて変化させる時は以下のように指定します。
（例）transition-delay: 2s;
 

transition-timing-function

変化の仕方を指定するプロパティです。

ease（初期値）

開始時と終了時は緩やかに変化します。

linear

開始から終了まで一定に変化します。

ease-in

開始時は緩やかに、終了時は早く変化します。

ease-out

開始時は早く、終了時は緩やかに変化します。

transition

ショートハンドプロパティでありtransition関連プロパティを一括で指定します。
transition: ＜変化の対象＞ ＜変化の時間＞ ＜変化の遅延＞ ＜変化の仕方＞;

＜変化の対象＞

transition-propertyの値を指定します。

＜変化の時間＞

transition-durationの値を指定します。。

＜変化の遅延＞

transition-delayの値を指定します。。

＜変化の仕方＞

transition-timing-functionの値を指定します。。

transform

変形する形態（移動、回転、伸縮、傾斜）を指定すします。
transformには2D（XY方向）と3D（XYZ方向）の指定ができますが今回は2Dのみについて解説します。

transform（translate）

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

translateX(X軸方向移動幅)

X軸方向に指定した幅を移動します。

translateY(Y軸方向移動幅)

Y軸方向に指定した幅を移動します。

translate(X軸方向移動幅,Y軸方向移動幅)

XY軸方向に指定した幅を移動します。

transform（rotate）

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

rotate(角度)

回転を指定します。整数は時計周り、負数は反時計周りになります。

rotateX(角度)

X軸方向に回転します。

rotateY(角度)

Y軸方向に回転します。

transform（scale）

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

scaleX(X軸方向伸縮率)

X軸方向に指定した伸縮率で伸縮します。

scaleY(Y軸方向伸縮率)

Y軸方向に指定した伸縮率で伸縮します。

scale(X軸方向伸縮率,Y軸方向伸縮率)

XY軸方向に指定した伸縮率で伸縮します。。

transform（skew）

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

skewX(X軸方向角度)

X軸方向に指定した角度で傾斜します。

skewY(Y軸方向角度)

Y軸方向に指定した角度で傾斜します。

skew(X軸方向角度,Y軸方向角度)

XY軸方向に指定した角度で傾斜します。。

@keyframes

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

「from / to」で指定

アニメーションの開始（from）から終了（to）までの動きを指定します。

百分率（%）で指定

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

「from / to」で指定

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

百分率（%）で指定

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

animetion

@keyframesの適用を指定します。
「transition」と同様の機能もありますが、より細かい動きを実装することが可能です。

animation-name

アニメーションの名前（@keyframesでつけた（名前））を指定します。
適用対象を指定するだけで実際のアニメーションはされません。
 

animation-duration

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

animation-timing-function

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

ease（初期値）

開始時と終了時は緩やかに変化します。

linear

開始から終了まで一定に変化します。

ease-in

開始時は緩やかに、終了時は早く変化します。

ease-out

開始時は早く、終了時は緩やかに変化します。

step-start

開始時に最終の状態になります。

step-end

終了時に最終の状態になります。

steps

指定した値で段階的に変化します。
animation-timing-function: 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)と同様

animation-delay

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

animation-iteration-count

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

animation-direction

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

normal（初期値）

毎回、順方向から再生します。

reverse

毎回、逆方向から再生します。

alternate

毎回反転させ、初回は順方向から再生します。

alternate-reverse

毎回反転させ、初回は逆方向から再生します。

animation-fill-mode

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

none（初期値）

アニメーション再生後、元のスタイルが適用されます。

forwards

アニメーション再生後、@keyframesで設定した100%の部分が適用されます。

backwards

animation-delay（開始するまでの遅延時間）で指定してる時間の間 @keyframesで設定した0%の部分が適用されます。

both

forwardsとbackwardsの両方によるスタイルが適用されます。

animation-play-state

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

running（初期値）

アニメーションが実行中になります。

paused

アニメーションが停止中になります。

animation

ショートハンドプロパティでありanimetion関連プロパティを一括で指定します。
animetion:
　　　　　　＜名前＞
　　　　　　＜変化の時間＞
　　　　　　＜変化の仕方＞
　　　　　　＜開始時間の遅延＞
　　　　　　＜繰り返し＞
　　　　　　＜再生方向＞
　　　　　　＜開始後のスタイル＞
　　　　　　＜再生・停止＞;

＜名前＞

animation-nameの値を指定します。

＜変化の時間＞

animation-durationの値を指定します。

＜変化の仕方＞

animation-timing-functionの値を指定します。

＜開始時間の遅延＞

animation-delayの値を指定します。

＜繰り返し＞

animation-iteration-countの値を指定します。

＜再生方向＞

animation-directionの値を指定します。

＜開始後のスタイル＞

animation-fill-modeの値を指定します。

＜再生・停止＞

animation-play-stateの値を指定します。

transition-duration（変化の開始から終了までの時間）

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

transition-duration: 1s;（開始時から終了までの時間：1秒）

transition-duration: 3s;（開始時から終了までの時間：3秒）

transition-delay（変化が開始するまでの遅延時間）

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

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

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

transition-timing-function（変化の仕方）

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

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

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

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

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

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);（XX軸方向に移動：100px, 100px）

rotate（回転を指定）

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

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

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

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

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

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

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倍）

skew（傾斜を指定）

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

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

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

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

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

animetion-duration（アニメーションの開始から終了までの時間）

animetion-duration: 1s;（開始時から終了までの時間：1秒）

animetion-duration: 3s;（開始時から終了までの時間：3秒）

animation-timing-function（アニメーションの変化の仕方）

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

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

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

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

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

animetion-delay（アニメーションが開始するまでの遅延時間）

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

animation-delay: 0s;（開始するまでの遅延時間：0秒）

animation-delay: 1s;（開始するまでの遅延時間：1秒）

animation-delay: 3s;（開始するまでの遅延時間：3秒）

animation-iteration-count（アニメーションの繰り返し回数）

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

animation-iteration-count: 2;（繰り返し回数：2回）

animation-iteration-count: infinite;（繰り返し回数：infinite（無限））

animation-direction（アニメーションの再生方向）

animation-direction: normal;（毎回、順方向（初期値））

animation-direction: reverse;（毎回、逆方向）

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

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

animation-fill-mode（アニメーションの開始前、終了後のスタイル）

※画面をリロード（再読み込み）して確認してください。
※背景色は「元のスタイル：赤、0%のスタイル：緑、100%のスタイル：青」に設定。
※遅延時間を「2秒間」に設定。

animation-fill-mode: none;（終了後に元のスタイル（初期値））

animation-fill-mode: forwards;（終了後に100%部分が適用）

animation-fill-mode: backwards;（開始前の遅延時間は0%部分が適用）

animation-fill-mode: both;（forwards、backwardsの両方）

animation-play-state（アニメーションの再生・停止）

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

animation-play-state: paused;（オンマウスで停止）

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

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

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