「animation」プロパティは、
動的なアニメーションを設定するための一括設定をするプロパティです。

「animation」プロパティには、
・animation
・animation-name
・animation-duration
・animation-timing-function
・animation-delay
・animation-iteration-count
・animation-direction
・animation-fill-mode
・animation-play-state
というプロパティが用意されていて、
「animation」プロパティは、他の「animation」系プロパティを一括で設定できるようになっている。

再生中の動画の動きは、「@keyframes」を使ってCSSに記述した動きにすることができる。

Back

「animation」プロパティの書式

「animation」プロパティの書式は、

animation{ animation-name animation-duration animation-timing-function animation-delay animation-direction animation-iteration-count animation-fill-mode animation-play-state }

サンプルコード

animation: Animation1 3s ease-in 1s 2 reverse both paused;
animation: Animation2 3s linear 1s;
animation: Animation3 3s;

@keyframes アニメーションの名前 {
0％ {
transform: translateX(0%);
}

50%{
transform: translateX(100%);
}

100% {
transform: translateX(0%);
}
}

のようになっていて、「（半角スペース）」で区切って、値を指定するようになっている。
記載順序は、自由のなようですが、
「animation-duration」と「animation-delay」が同じ秒数指定なので、
「animation-duration」「animation-delay」の順番で、間に他の値が入っても大丈夫なようです。

個人的には、「animation-name」を最初にもってくる方が記述しやすいと思っています。
上手くいかない時は、個別に指定するか、順序を入れ替えてみてください。
最初は、シンプルに少ない値で指定すると簡単に動きます。
動作した後に色々と加えていくと、エラーも見つけやすい。

「animation」を指定した後は、
「@keyframes」によって、アニメーションの動きを指定する。
「@keyframes」を使って「CSS」コードを記述することによって、
アニメーションを自由に動かすことができるようになっています。
パーセンテージの他に、「from（0%）」「to（100%）」という表記も使用可能。

「フワッとしたフェードイン」をする「CSS」の「サンプルコード」

body {
animation: fadeIn 5s ease 0s 1 normal;
-webkit-animation: fadeIn 5s ease 0s 1 normal;
}
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

Back

「animation」プロパティの種類

「animation」プロパティの「種類一覧」

プロパティ名	初期値	説明
animation-name	none	アニメーションの名前。複数のアニメーションを同時に設定する時に、それぞれのアニメーションに名前を割り当てる時に使用する。「animation-name」を指定して、アニメーションの動きをコントロールすることができる。アニメーションの動きは、CSSファイルに「@keyframes name{アニメーションの動き}」を使って記述する。
animation-duration	0s	アニメーション1回が、完了するまでの所要時間を設定することができる。
animation-timing-function	ease	アニメーションの動きを設定。設定値は、・ease ・linear ・ease-in ・ease-out ・ease-in-out ・cubic-bezier(p1, p2, p3, p4) ・steps(n, jumpterm) ・step-start ・step-end などがある。
animation-delay	0s	秒数指定で、アニメーションを開始するタイミングを指定する。「ミリ秒（ms）」「秒（s）」単位で指定が可能。すぐに開始する場合は、「0s」指定。途中から始めたい場合は、「-3秒」などマイナス指定する。
animation-iteration-count	1	アニメーションを何回再生するかを指定する。「infinite」と設定すると、ずっと繰り返しになる。
animation-direction	normal	アニメーションの再生を逆再生にするか、前後反転するかの設定。デフォルトは通常再生の「normal」。設定値は、 normal デフォルトの値。アニメーションを毎回順方向に再生する。 reverse アニメーションを毎回逆方向に再生する。タイミング関数も「ease-out」になる。 alternate 順方向再生と逆再生を繰り返す。初回は順方向で、再生回数が偶数の場合は逆再生。 alternate-reverse 逆再生と順方向再生を繰り返す。初回を逆再生にして、再生回数が偶数の時が順再生。などがある。
animation-fill-mode	none	アニメーション再生が終わった後に、再生前の状態に戻すか、再生後の状態をキープするかの設定。デフォルトは、「none」だが、再生前の状態に戻る。設定値は、・none ・forwards ・backwords ・both など。
animation-play-state	running	アニメーションの停止・再生をコントロールする設定値。ユーザーのアクションによって、動画の再生・停止をコントロールするときに使える。

Back

「animation-timing-function」プロパティの設定値の種類

「animation-timing-function」プロパティは、
アニメーションの動きを設定することができる。

設定値は、
・ease
・linear
・ease-in
・ease-out
・ease-in-out
・cubic-bezier(p1, p2, p3, p4)
・steps(n, jumpterm)
・step-start
・step-end
などがある。
詳細は下記の表に記載。

「animation-timing-function」プロパティの設定値の種類

プロパティ名

初期値

説明

ease

デフォルトの値。
cubic-bezier(0.25, 0.1, 0.25, 1.0) と同じ。
アニメーションの中央に向けて変化量が増加し、最後に向けて減少する。

linear

cubic-bezier(0.0, 0.0, 1.0, 1.0) と同じ。
等しい速度でアニメーションが再生される。

ease-in

cubic-bezier(0.42, 0, 1.0, 1.0) と同じ。
アニメーションの再生は、変化速度がゆっくり始まり、終了まで加速する。

ease-out

cubic-bezier(0, 0, 0.58, 1.0) と同じ。
アニメーションは、速く始まり、速度を落としながら終了する。

ease-in-out

cubic-bezier(0.42, 0, 0.58, 1.0) と同じ。
アニメーションは、ゆっくり変化しながら速度を上げ、速度を落として終了する。

cubic-bezier(p1, p2, p3, p4)

ユーザーが自由に定義できる値。
二次元ベジェ曲線の値を変化させることで、アニメーションを構成する。
設定値の「p1」と「p3」の値は、「0」から「1」の間で設定する必要がある。

steps(n, <jumpterm>)

停止点の数を指定することができる値。

指定した停止点では、指定した「jumpterm」の方法でそれぞれ一定時間停止する。

jump-start	アニメーションの開始時に最初のジャンプが発生する。
jump-end	アニメーションの終了時に最後のジャンプが発生する。
jump-none	どちらにもジャンプなないが、「0%」と「100%」の両方で、それぞれ「1/n」の間隔を保持される。
jump-both	「0%」と「100%」の両方を含んで停止点を構成し、アニメーションの反復中に効果的にステップを追加する。
start	jump-start と同じ。
end	jump-end と同じ。

step-start

steps(1, jump-start) と同じ。

step-end

steps(1, jump-end) と同じ。

Back

【CSS】「animation」プロパティ

INDEX

「animation」プロパティとは

「animation」プロパティの書式

サンプルコード

「フワッとしたフェードイン」をする「CSS」の「サンプルコード」

「animation」プロパティの種類

「animation」プロパティの「種類一覧」

normal

reverse

alternate

alternate-reverse

「animation-timing-function」プロパティの設定値の種類

「animation-timing-function」プロパティの設定値の種類