CSSでアニメーション

CSSでアニメーションをつける方法について、簡単にまてめておきます。
詳しくは自分でググってみて下さい（笑）

CSSを使って動きをつけるには、大きく2つの方法（プロパティ）があります。
簡単に二つの方法についてまとめておきます。

「transition」プロパティを利用する。

簡単に動きをつけることができる。

逆に言うと、細かな設定はできません。変化前→変化後のタイミングや度合いの調整をすることができます。

要素単位で指定する。

変化させたい要素毎に設定が必要になります。

きっかけが必要になる。

:hoverや:activeなどの要素の変化が必要になります。この変化に対して動きをつけることになります。

「transition」で設定できるプロパティ

transitionは一括指定プロパティです（複数の要素に指定する場合はカンマ区切り）
　　transition: <property> <duration> <delay> <timing-function> ;
記述の順序に決りはありませんが、<duration> <delay>は同じ時間の指定なので、先に記述した方が<transition-duration>の指定となります。

プロパティ	内容	初期値
transition-property	動きをつける対象のプロパティ	all（すべて）
transition-duration	動きの時間	0s
transition-delay	動きを開始するタイミング	0s
transition-timing-function	動き（変化）の度合い	ease（最初と最後はゆっくり変化）

transition-propertyの種類
　none：どのプロパティも対象としない
　all：全てのプロパティを対象
　プロパティ名：指定たプロパティを対象

timing-functionの種類
　ease：最初と最後はゆっくり変化
　ease-in：最初はゆっくり、最後は速く変化
　ease-out：最初は速く、最後はゆっくり変化
　ease-in-out：easeよりも最初と最後はゆっくり変化
　liner：一定に変化
　cubic-bezier( x,y,x,y )：ぺジェ曲線により任意に指定

簡単な例

.sample {
  font-size: 20px;
  color: #ffffff;
  transition: color 2s 0s ease;　　　　/* colorプロパティのみに動きをつける */
}
.sample:hover {
  font-size: 16px;
  color: #000000;
}

「animation」プロパティを利用する。

「transition」よりも、より細かな動きを設定することができます。

「@keyframes」で変化させたい要素の開始時の状態と終了時の状態を設定

「animation」プロパティで詳細を設定

「＠keyframes」を設定する。

変化させたい要素の状態を書きます。

例：最初は透明ですが徐々に見えてくるような動きの場合（opacityを0から1に変化）

@keyframes <アニメーションの定義名> {
　　0% {
　　　　　　　　　　opacity: 0;
　　　　　　　　}
　　100% {
　　　　　　　　　　opacity: 1;
　　　　　　　　}
}

0%が開始時、100%が終了時になりますが、中間時（20%,50%など）も指定すれば、より細かな動きを設定することができます。
動きを定義しておくことで、「animation」プロパティで何度でも使うことができます。

「animation」で設定できるプロパティ

animationは一括指定プロパティです（複数の要素に指定する場合はカンマ区切り）
　　animation: <name> <fill-mode> <property> <iteration-count> <timing-function>
　　　　　　　 <delay> <duration> <play-state> ;
記述の順序に決りはありませんが、<duration> <delay>は同じ時間の指定なので、先に記述した方が<animation-duration>の指定となります。

プロパティ	内容	初期値
animation-name	アニメーションの定義名	半角英数字で自由に指定
animation-fill-mode	アニメーションの開始時と終了時の状態	none
animation-duration	アニメーションの1回の長さ	0s
animation-iteration-count	アニメーションのループを指定	1
animation-timing-function	アニメーションの変化の度合い	ease
animation-delay	アニメーションを開始するタイミング	0s
animation-direction	アニメーションの再生の向きを指定	normal
animation-play-state	アニメーションの再生と停止	running

animation-fill-modeの種類
　none：指定なし
　forwards：最後の状態を保持
　backwards：最初の状態に戻る
　both：forwardsとbackwardsの両方が適用

animation-iteration-countの種類
　infinite：無限に繰り返す
　数値：繰り返す回数を指定

animation-timing-functionの種類
　ease：最初と最後はゆっくり変化
　ease-in：最初はゆっくり、最後は速く変化
　ease-out：最初は速く、最後はゆっくり変化
　ease-in-out：easeよりも最初と最後はゆっくり変化
　liner：一定に変化
　step-start：開始時に最終の状態まで変化
　step-end：終了時に最終の状態まで変化
　steps( 数値, start もしくは end )：パラパラ漫画のように指定したコマ数で変化
　cubic-bezier( x,y,x,y )：ぺジェ曲線により任意に指定

animation-directionの種類
　normal：順方向に再生
　reverse：逆方向に再生
　alternate：順方向と逆方向が交互に再生（奇数回は順方向、偶数回は逆方向）
　alternate-reverse：逆方向から始まり、順方向と交互に再生

animation-play-stateの種類
　running：再生
　paused：停止

簡単な例

.sample {
　　　　animetion: anime fowards 6s 2 ease 2s reverse normal running;
}

@keyframes anime {
　　0% {
　　　　　　　　　　opacity: 0;
　　　　　　　　}
　　100% {
　　　　　　　　　　opacity: 1;
　　　　　　　　}
}