CSSアニメーションをとにかくそれっぽく使えるようになる記述方法

#CSSアニメーションの指定プロパティが多い件について。
多い。多いよ！（めんどくさがり）
というわけで、指定プロパティを忘れたときにぱっと検索できるようにメモ。

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


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


**一括指定の方法**
transition : ①[property](https://qiita.com/kape/private/0c13d823ecd20badfb9d#-transition-property) ②[duration](https://qiita.com/kape/private/0c13d823ecd20badfb9d#-transition-duration) ③[timing-function](https://qiita.com/kape/private/0c13d823ecd20badfb9d#-transition-timing-function) ④[delay](https://qiita.com/kape/private/0c13d823ecd20badfb9d#-transition-delay) ;

```css:css

/*記述例*/
transition: all 4s ease-in-out 1s;
```
durationとdelayはこの順番で記述しないといけないらしいので、もうこの順番で覚えてしまおうと思います！

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

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

###② transition-duration
アニメーション時間を指定できる。秒（s）かミリ秒（ms）。
<font color="red">※0秒の時でも「0」ではなく「0s」と書く。</font>

###③ transition-timing-function
タイミング関数を指定できる。いろんな変わった動きをするやつのことのようだ。
初期値はease。タイミング関数は7つでease・ease-in・ease-out・ease-in-out・linear・step-start・step-end がある。
詳細はこちら⇒ [CSS3のtransition-timing-functionの動きをサンプルで理解しよう](http://weboook.blog22.fc2.com/blog-entry-313.html)

###④ transition-delay
アニメーションが始まるまでの待ち時間を指定できる。秒（s）かミリ秒（ms）。
<font color="red">※0秒の時でも「0」ではなく「0s」と書く。</font>

##3. transitionの参考URL
詳しくはちゃんとまとめてくださってる記事がいっぱいあるからそっちを見ればよし。

* [【CSS3】Transition（変化）関連のまとめ](https://qiita.com/7968/items/812d6a21fc4dd9ae9c75)
* [transition - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/transition)

##4.animationの指定方法（@keyfrsmes）
基本的な指定方法は2つ。2つとも意味は同じ。

```css:css(@keyframesの記述例)
@keyframes anime {
    0% {
        opacity : 0 ;
    }
    100% {
        opacity : 1 ;
    }
}
@keyframes anime {
    from {
        opacity : 0 ;
    }
    to {
        opacity : 1 ;
    }
}
```
アニメーションをさらに細かく指定したい場合はこんな感じで記述できる。

```css:css(@keyframesを細かく指定した場合の記述例)
@keyframes anime {
    0% {
        opacity : 0 ;
    }
    50% {
        opacity : 0.3 ;
}
    100% {
        opacity : 1 ;
    }
}
```

##5. animationの指定プロパティ（8つ）
8つって聞いただけでやる気なくなるけど頑張っていってみよー！

**一括指定の方法**
transition: ①[name](https://qiita.com/kape/private/0c13d823ecd20badfb9d#-animation-name) ②[duration](https://qiita.com/kape/private/0c13d823ecd20badfb9d#-animation-duration) ③[timing-function](https://qiita.com/kape/private/0c13d823ecd20badfb9d#-animation-timing-function) ④[delay](https://qiita.com/kape/private/0c13d823ecd20badfb9d#-animation-delay) ⑤[iteration-count](https://qiita.com/kape/private/0c13d823ecd20badfb9d#-animation-iteration-count) ⑥[direction](https://qiita.com/kape/private/0c13d823ecd20badfb9d#-animation-direction) ⑦[fill-mode](https://qiita.com/kape/private/0c13d823ecd20badfb9d#-animation-fill-mode) ⑧[play-state](https://qiita.com/kape/private/0c13d823ecd20badfb9d#-animation-play-state)

```css:css
/*記述例*/
animation: anime 3s ease-in 1s 2 reverse both paused;
```
transitionの時と同じくdurationとdelayは順番はこのままのようです。

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

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

```css:css(@keyframesの記述例)
@keyframes anime {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
```
<font color="red">animationプロパティを使うときは絶対忘れずに入れてね！（自分はうっかり忘れそう）</font>

###② animation-duration
**transitionと同じ。**アニメーション時間を指定できる。秒（s）かミリ秒（ms）。
<font color="red">※0秒の時でも「0」ではなく「0s」と書く。</font>

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

詳細はこちら⇒ [animation-timing-function - 【CSS3】@keyframes と animation 関連のまとめ](https://qiita.com/7968/items/1d999354e00db53bcbd8#no03-animation-timing-function-%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3)
一覧表の下には実際の動き一覧があってとってもわかりやすいです！

###④ animation-delay
**transitionと同じ。**アニメーションが始まるまでの待ち時間を指定できる。秒（s）かミリ秒（ms）。
<font color="red">※0秒の時でも「0」ではなく「0s」と書く。</font>

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

###⑥ animation-direction
アニメーションの再生の仕方を指定できる。
初期値は normal。値は4つでnormal, reverse, alternate, alternate-reverse 。
そしてそして、わかりやすい詳細（以下略）⇒
 [No.05 animation-iteration-count プロパティ - 【CSS3】@keyframes と animation 関連のまとめ](https://qiita.com/7968/items/1d999354e00db53bcbd8#no05-animation-iteration-count-%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3)

###⑦ animation-fill-mode
アニメーションの開始前と開始後の状態を指定できる。・・・ちょっと意味わからん。
いや、でもこれを見れば（以下略）⇒
[No.07 animation-fill-mode プロパティ - 【CSS3】@keyframes と animation 関連のまとめ](https://qiita.com/7968/items/1d999354e00db53bcbd8#no07-animation-fill-mode-%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3)

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

##7. animationの参考URL

* [【CSS3】@keyframes と animation 関連のまとめ](https://qiita.com/7968/items/1d999354e00db53bcbd8)
* [animation - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/animation)