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

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

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

@keyframes 任意の名前 {
    from {
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
    }
 
    to {
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
    }
}

※fromがアニメーション開始時、toがアニメーション終了時
また、下記のように%指定でも記述可。

@keyframes 任意の名前 {
    0% {
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
    }
 
    　50% {
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
    }
 
    100% {
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
        CSSプロパティ:値;
    }
}

keyframesを使うときは、下記のように記述します。

animation-name: 任意の名前;

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

＜初期値＞

• 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
また、「animation-timing-function」は用意された設定だけでなく、自分でオリジナルの設定をつくることも可能です。
オリジナルの設定は、easingのベジェ曲線を使って設定可能です。

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

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

このサイトを利用することで、自分の制作したいベジェ曲線を制作できます。
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)

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