CSSアニメーションの指定プロパティが多い件について。

多い。多いよ！（めんどくさがり）
というわけで、指定プロパティを忘れたときにぱっと検索できるようにメモ。

最低限必要な記述方法は前回の記事を参照してください。ふーんこんな感じで記述するのねーって感じの内容です。
【前回記事】CSSアニメーションをとりあえず動かすことだけを考えた記述方法

1. transitionの指定プロパティ（4つ）

やった！ちょっと少ない。
指定プロパティの正式名称は、使ってるうちに覚えるでしょ。ということで一括プロパティで。

一括指定の方法
transition : ①property ②duration ③timing-function ④delay ;

css


/*記述例*/
transition: all 4s ease-in-out 1s;

durationとdelayはこの順番で記述しないといけないらしいので、もうこの順番で覚えてしまおうと思います！

2.それぞれの指定プロパティの意味とかいろいろ（transition）

① transition-property

変化させたいプロパティを指定できる。とりあえず全部反映させたい場合は「all」。逆は「none」。

② transition-duration

アニメーション時間を指定できる。秒（s）かミリ秒（ms）。
※0秒の時でも「0」ではなく「0s」と書く。

③ transition-timing-function

タイミング関数を指定できる。いろんな変わった動きをするやつのことのようだ。
初期値はease。タイミング関数は7つでease・ease-in・ease-out・ease-in-out・linear・step-start・step-end がある。
詳細はこちら⇒ CSS3のtransition-timing-functionの動きをサンプルで理解しよう

④ transition-delay

アニメーションが始まるまでの待ち時間を指定できる。秒（s）かミリ秒（ms）。
※0秒の時でも「0」ではなく「0s」と書く。

3. transitionの参考URL

詳しくはちゃんとまとめてくださってる記事がいっぱいあるからそっちを見ればよし。

4.animationの指定方法（@keyfrsmes）

基本的な指定方法は2つ。2つとも意味は同じ。

css(@keyframesの記述例)

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

アニメーションをさらに細かく指定したい場合はこんな感じで記述できる。

css(@keyframesを細かく指定した場合の記述例)

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

5. animationの指定プロパティ（8つ）

8つって聞いただけでやる気なくなるけど頑張っていってみよー！

一括指定の方法
transition: ①name ②duration ③timing-function ④delay ⑤iteration-count ⑥direction ⑦fill-mode ⑧play-state

css

/*記述例*/
animation: anime 3s ease-in 1s 2 reverse both paused;

transitionの時と同じくdurationとdelayは順番はこのままのようです。

6. それぞれの指定プロパティの意味とかいろいろ（animation）

① animation-name

@keyframes の後につける名前のこと。記述例の anime ってとこね！大文字でも小文字でもいけるっぽい。

css(@keyframesの記述例)

@keyframes anime {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

animationプロパティを使うときは絶対忘れずに入れてね！（自分はうっかり忘れそう）

② animation-duration

**transitionと同じ。**アニメーション時間を指定できる。秒（s）かミリ秒（ms）。
※0秒の時でも「0」ではなく「0s」と書く。

③ animation-timing-function

基本はtransitionと同じだが、**steps(正数, start または end)とcubic-bezier(x軸の値, y軸の値, x軸の値, y軸の値)**の2つが加わった全部で9つのタイミング関数を指定できる。
初期値はease。

詳細はこちら⇒ animation-timing-function - 【CSS3】@keyframes と animation 関連のまとめ
一覧表の下には実際の動き一覧があってとってもわかりやすいです！

④ animation-delay

**transitionと同じ。**アニメーションが始まるまでの待ち時間を指定できる。秒（s）かミリ秒（ms）。
※0秒の時でも「0」ではなく「0s」と書く。

⑤ animation-iteration-count

アニメーションの繰り返す回数。・・・ということはtransitionは繰り返せないのか。そーかそーか。
ちなみにループさせたいときはinfinite。インフィニティ！夢は無限大！

⑥ animation-direction

アニメーションの再生の仕方を指定できる。
初期値は normal。値は4つでnormal, reverse, alternate, alternate-reverse 。
そしてそして、わかりやすい詳細（以下略）⇒
No.05 animation-iteration-count プロパティ - 【CSS3】@keyframes と animation 関連のまとめ

⑦ animation-fill-mode

アニメーションの開始前と開始後の状態を指定できる。・・・ちょっと意味わからん。
いや、でもこれを見れば（以下略）⇒
No.07 animation-fill-mode プロパティ - 【CSS3】@keyframes と animation 関連のまとめ

⑧ animation-play-state

アニメーションの再生、停止の指定ができる。ranning（再生）とpasused（停止）がある。
どういうときに使うんだろう。ボタン押したら停止、とかかな？

7. animationの参考URL