CSS3( + jquery )でアニメーション

作成日: 2018/04/13

更新日: 2018年4月13日

CSS3を利用したアニメーションの実装をまとめました。アニメーションを実装するためのパターン（transitionやanimation）の説明、実装例などを記述しておきます。一時期まではアニメーションと言えばjQueryというほど、jQueryのanimate()を利用してアニメーションするのが流行りましたが、CSSでアニメーションする方が多くなってきている印象です。しかし今でも、「アニメーションを開始させる役割」としてjavascriptを利用する場合は多いです。必ずjQueryである必要はありませんが、この記事ではjavascriptを利用する箇所では慣れているjQueryを採用しています。

CSS3のアニメーションについて

CSS3のアニメーションについてをまずは説明します。

対応ブラウザについて

CSS3でアニメーション効果を利用できるようになってから数年が経ちました。対応ブラウザなどの心配もありますが、モダンブラウザでは自動更新がデフォルトであること、スマホの普及やWindowsXPのサポート停止などを経て、対応ブラウザを最新環境に設定しているサイトも多くなってきている印象です。IEの旧バージョンは切り捨ててもIE11は切り捨てるべきではないと個人的には思っていますが(仕事で制作した日本向けの企業サイトでは10%～30%の割合で未だIEを利用している人がいます)、IE11ではアニメーションを使えるため実装はしても問題なさそうです。バグなどが報告されているそうなので、確認はしないといけません。

CSSアニメーションの実装方法

CSSのアニメーションは主に２つの方法があります。
１つは「transition」。これは要素の値が変更された時、変化にかかる時間など「どのように変化するか」を指定をすることができます。例えばwidth:100pxの要素に「transition:width 1s linear 0」と指定し、その要素をjavascriptでwidth:200pxに変更したとします。すると一瞬で200pxになるわけではなく、100pxから200pxへ「1秒かけて徐々に変化する」ことになります。これを利用して徐々に動く「アニメーション」効果をつけることができるのです。
2つ目は「@keyframes」と「animation」。まずは「@keyframes」で「何をどのように変化させるか」というアニメーションを作ります。始まりから終わりまでを「0%～100%」で表すのですが、widthを100px→200pxへと変化させたい場合は、「0%」のときに「width:100px」、「100%」のときに「width:200px」といった具合です。これでは動きを作っただけなので、どの要素が動くのか指定しなくてはなりません。作ったアニメーションを要素に対して指定するには「animation」を使います。つまり「@keyframes」でアニメーションを作り、「animation」でアニメーションを要素にしているという流れになります。

CSSアニメーションの開始について

単純にCSSで要素にアニメーションを指定しただけの場合、アニメーションの開始はCSSが反映された時、つまり読み込まれてすぐに動くことになります。ローディングのアイコンなどはそれでもいいかもしれませんが、こうした時に動いてほしい等、タイミングを制御した場合はCSSの記述を工夫したり、javascriptを利用する必要があります。

CSS3で完結する例

CSSだけでアニメーション開始のタイミングを計れる場合は以下のような場合になります。そもそもずっと動き続けてほしい場合や、「:hover」など疑似要素を利用した場合など、基本的にCSSでアニメーションになるタイミングを再現できればCSSで完結することができます。

要素Aを無限にアニメーション
要素Aをマウスオーバーした時に要素Aをアニメーション(「:hoverを利用」)
ウィンドウ幅が640px以内に変わったときにアニメーション(「@media screenを利用」)

javascriptなどが必要な例

クリックした時に別の要素を動かすなど、CSSで開始のタイミングを再現できない場合があります。そいうときはjavascriptなどでタイミングを任意に変更してあげる必要があります。

要素Aをクリックした時に要素Bをアニメーション
ページが完全に読み込まれた後に要素Aをアニメーション

この様な場合、大体次のような流れでCSSアニメーションを行います。
要素Aをクリックした時に要素Bをアニメーションしたいとします。

1) CSS3で特定のclassに対してアニメーションを指定しておく
2) ユーザーが要素Aをクリック
3) javascriptで要素Bに対してclassをつける
4) classに設定したアニメーションが実行される

「transition」でアニメーション

まずは「transition」の説明をします。「transition」については前述した通り、変化した時「どのように変化するか」を指定することができます。変化前と変化後の指定が必要になってきます。

tranditionの値

「trandition」は、「trandition:(property) (duration) (timing-function) (delay);」のように指定します。1つずつ見ていきましょう

property: propertyは「何が変化した時」を指定します。widthが変わったときなら「width」、背景色なら「background-color」などなど。
すべてのプロパティが変化したときを指定したい場合は「all」にします。逆に何もアニメーションさせたくないときは「none」にします。
duration: durationは「変化にかかる時間」を指定します。単位は「s」で秒(second)となっているので、0.5秒なら「0.5s」、1秒なら「1s」、2秒なら「2s」…0秒なら「0s」です。ミリ秒（ms）で指定することもできます。
timing-function: timing-functionは「変化の流れ」を指定します。一定の変化率でする場合、最初はゆっくり変化して最後にギュンっと変化するなどです。指定は、「ease」などの用意されている値を入れるか、「cubic-bezier」で変化の流れを数値化したものを指定します。
delay: delayは「アニメーション開始するまでの時間」を指定します。durationと同じように秒やミリ秒を指定します。タイミングを計ることができます。

「trandition」のCSSの指定

以上を踏まえてCSSを記述すると以下のようになります。
以下の例では、class「tr01」に対して、【width】が変更された時、【2秒】かけて、【ease】の動きで、【0秒後】にアニメーションするということになります。

.tr01{
	transition: width 2s ease 0s;}

1 2	.tr01{ transition: width 2s ease 0s;}

また、各値の違いがあるとどうなるかまとめてみました。
「transition」でアニメーションするデモ

「trandition」の「timing-function」まとめ

動きを指定する「timing-function」は色々用意されています。また、各値の違いがあるとどうなるかまとめてみました。
「trandition」の「timing-function」まとめ

CSS3( + jquery )でアニメーション