CSSを使ったアニメーション

#はじめに
おはようございます。こんにちは。こんばんは。
ワタタクです。
WEBサイトの1部分をアニメーションさせたいと考えるとjavascriptやjQueryが必要になると思いますよね。
少し前だとFlashを使ってアニメーションさせるのが主流でした。
しかし、現在ではCSS3の機能拡充のおかげで難しいjavascriptやjQueryやFlashなどを使わなくてもアニメーションさせることも可能です。
<font color="red">(アニメーションをおこなうタイミングを指定するとなると、javascriptやjQueryが必要になります。)</font>
*「簡単にアニメーションをつくりたい」「かっこいい動きを簡単に実装したい」*という方にCSSでのアニメーションがおすすめです。
なので今回は、CSSを使ったアニメーションについて説明します。
#keyframesを理解する
CSSアニメーションを使用する上で必要になるのが、``keyframes``です。
keyframesは、開始から終了までどのようなアニメーションをするのかを指定できるCSSになります。

keyframesを使用することで、より細かいアニメーションの変化やタイミングなどを指定できます。
##記述法

```css
@keyframes 任意の名前 {
    from {
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
    }
 
    to {
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
    }
}
```
<font color="red">**※fromがアニメーション開始時、toがアニメーション終了時**</font>
また、下記のように``%``指定でも記述可。

```css
@keyframes 任意の名前 {
    0% {
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
    }
 
    　50% {
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
    }
 
    100% {
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
    }
}
```
keyframesを使うときは、下記のように記述します。

```css
animation-name: 任意の名前;
```
#CSSアニメーションのプロパティを理解する
CSSアニメーションを実装するにはいくつもあるCSSアニメーションのプロパティを理解しなければなりません。
##animation
animationプロパティでは、 animation-name、 animation-duration、 animation-timing-function、 animation-delay、 animation-iteration-count、 animation-direction	の6つのプロパティの値を、スペースで区切って指定することができます。
<font color="red">*6つのプロパティは後述*</font>
 省略された値はそれらの初期の値に設定されます。

*＜初期値＞*

-  animation-nameはnone
-  animation-durationは0
-  animation-timing-functionはease
-  animation-delayは0
-  animation-iteration-countは1
-  animation-directionはnormal

##animation-durationプロパティ
**アニメーションの時間を設定するのが、「animation-duration」です。
これは、アニメーションが始まって終わるまでの時間を指定します。**
animation-durationは「``s」もしくは「ms」``で記述します。
「*s」は、「1s」で1秒、「ms」は「1000ms」で1秒です。*
このようにアニメーションを速くさせたり遅くさせたりできるのが、「animation-duration」の特徴です。

``注意点)
値が「0」のときの記述です。``

*「padding」「margin」「top」「bottom」「left」「right」などは値が「0」のとき「0」と記述すれば大丈夫ですが、「animation-duration」の場合値が「0」のときは「0s」と記述しなければなりません。*
##animation-iteration-countプロパティ
「animation-iteration-count」は、アニメーションさせる回数を指定します。
仮に、アニメーションを3回したい場合は「animation-iteration-count: 3;」と記述すれば大丈夫です。

*無限に繰り返したい場合は、「infinite」と指定することで繰り返しアニメーションが再生することが可能です。*
##animation-timing-functionプロパティ
**animation-timing-functionは、アニメーションの変化の度合いを指定できるプロパティです。**

「animation-duration」の値で有名なのは、以下の5つです。

- ease(初期値)・・・アニメーションの開始時と終了時はゆっくりと変化する
- ease-in・・・アニメーションの開始時はゆっくりと変化して、終了時は速く変化する
- ease-out・・・アニメーションの開始時は速く変化して、終了時はゆっくりと変化する
- ease-in-out・・・「ease」よりもアニメーションの開始時と終了時はとてもゆっくりと変化する
- linear・・・アニメーション開始時から終了時まで一定に変化する
初心者の方はこの5つを中心に設定するのがおすすめです。

しかし、設定できるアニメーションの変化はコレだけではありません。
こちらのサイトでは様々な「animation-timing-function」の設定を紹介しているので、ぜひ参考にしてください。
[https://easings.net/ja](https://easings.net/ja)
また、「animation-timing-function」は用意された設定だけでなく、自分でオリジナルの設定をつくることも可能です。
オリジナルの設定は、easingのベジェ曲線を使って設定可能です。

ベジェ曲線の作成方法は、大きく分けて2つあります。

1つ目の方法は、Chromeの開発者ツールを使う方法です。
2つ目の方法がeasingのベジェ曲線のジェネレーターを使用する方法です。

このサイトを利用することで、自分の制作したいベジェ曲線を制作できます。
[http://cubic-bezier.com/#.17,.67,.83,.67](http://cubic-bezier.com/#.17,.67,.83,.67)
##animation-delayプロパティ
**animation-delayプロパティは、アニメーションの開始時間を指定できるプロパティです。**
##animation-directionプロパティ
animation-directionプロパティは、アニメーションの指定方向を設定できるプロパティです。

animation-directionプロパティの値は以下の4つがあります。

- normal(初期値)・・・指定した方向にアニメーションが毎回再生される
- reverse・・・指定した方向とは逆のアニメーションが毎回再生される
- alternate・・・指定した方向→指定した方向とは逆の方向の順番でアニメーションが毎回再生される
- alternate-reverse・・・指定した方向とは逆の方向→指定した方向でアニメーションが毎回再生される

##animation-fill-modeプロパティ
**animation-fill-modeプロパティは、アニメーション開始前と終了後のスタイルを指定できるプロパティです。**

animation-fill-modeプロパティの値は、以下の4つがあります。

- none(初期値)・・・アニメーションの開始前と終了後には、指定したスタイルが適用されない
- forwards・・・アニメーション終了後には、指定したスタイルが適用される
- backwards・・・アニメーション開始時のスタイルがアニメーション開始前にも適用される
- both・・・アニメーション開始時のスタイルがアニメーション開始前にも適用され、アニメーション終了後には、指定したスタイルが適用される(forwards+backwards)

以上。
#最後に
最後まで読んでいただきありがとうございました。
もし間違い等、アドバイス、ご指摘等有れば教えていただけたら幸いです。