BLOG ブログ

> ブログ

こんにちは!WEBデザイナーのこたです。

今回はCSSのアニメーションについての紹介になります。
今ではJavaScriptやjQueryを使わずにCSSだけで多くの動きをつけられるようになりました。
しかし、CSSアニメーションは複雑な設定が必要で、苦手を持っている人もいるのではないでしょうか?

そのような方のために一般的な設定方法を紹介し、アニメーションは意外と簡単に設定できるという認識を持ってもらえるよう、今回は「画像の色が変化するアニメーションを設定する方法」についてご紹介いたします。

画像の色が変化するアニメーションのサンプル

今回はアニメーションをループ再生させています。

See the Pen
vYxKvxa
by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

キーフレームアニメーションとトランジションの使い分け

利用するシーンとしては、トランジションではできない、より複雑なアニメーションを設定したいときにキーフレームアニメーションを使用すると認識しておきましょう。

トランジションは「変化前の状態」と「変化後の状態」をなめらかにつなげる機能です。
単純なアニメーションは比較的簡単に設定することができますが、次のようなことはできません。

  • 設定できるのは「変化前」と「変化後」の状態だけで「中間の状態は」設定できない
  • トランジションは一回しか発生しないので、アニメーションを繰り返すことはできない

キーフレームアニメーションの設定方法

「キーフレームアニメーション」とは、最初の状態と最後の状態に加え、必要であればその中間の状態を設定しておいて、「最初→中間→最後」の間をなめらかにつなぐアニメーション技法のことをいいます。
この「最初の状態、最後の状態、中間の状態」のことを「キーフレーム」といいます。

中間の状態は、必要に応じていくつでも設定することができます。

CSSでキーフレームアニメーションをするためには、まずキーフレームを設定しましょう。

@keyframes

①アニメーション名

「@keyframes{〜}」までが、ひとつのキーフレームアニメーションです。
「①アニメーション名」の部分は、このキーフレームアニメーションにつける名前を設定します。
この名前は、あとで要素にキーフレームアニメーションを適用する際に使用します。どのような名前でも大丈夫です。

②キーフレームの場所

keyframesの{〜}の中には、キームレームの設定を記述します。
「②キーフレームの場所」には、アニメーションが開始してからの「進捗率」を、単位「%」で指定します。
キーフレームアニメーションには、最低でも「最初の状態(進捗率0%)」と「最後の状態(進捗率100%)」の二つのキーフレームが必要です。

また、中間の状態のキーフレームも追加できます。例えば、アニメーションがちょうど半分経過したところ(進捗率50%)に設定するのであれば、「②キーフレームの場所」を次のように設定します。

各キーフレーム要素の説明

animation-name

animation-name:change_color;

@keyframesで設定したキーフレームはアニメーションさせたい要素に適用する必要があります。
そのために使用するのが「animation-name」プロパティです。
animation-nameプロパティの値には、@keyframesにつけた「アニメーション名」を設定します。

animation-duration

animation-duration: 1s;

アニメーションの長さを秒数で定義します。
値の単位はトランジションでも使用している「s」です。

animation-timing-function

animation-timing-function:linear;

アニメーションのイージングの設定をします。
イメージングとは、変化するときの「緩急」のことです。
最初はゆっくり変化して、あとから急激になる「イーズイン(ease-in)」、その反対に、はじめは急激で、終わりが近くにつれてゆっくり変化する「イーズアウト(ease-out)」などがあります。「linear」は一定速度で変化します。

animation-iteration-count

animation-iteration-count:infinte;

アニメーションの繰り返し回数の設定をします。
このプロパティのデフォルト値は「1」で、アニメーションは一度だけ再生されますが、繰り返したいときは2以上の数をしていします。
指定する値を「infinte」することで無限に繰り返されます。

animation-direction

animation-direction:normal;

アニメーションの再生方法の指定プロパティです。
アニメーションを逆に再生したり、繰り返しが設定されているときに順再生と逆再生を交互に入れ替えたりすることができます。

normal 順再生する。デフォルト値
reverse 逆再生する
altermate 「順再生→逆再生」を繰り返す。行ったり来たりするようなアニメーションを表現できる
alternate-reverse 「逆再生→順再生」を繰り返す

animation-delay

animation-delay: 2s;

アニメーションを再生するか、一時停止するかを決めるプロパティです。
値が「running」のときは、アニメーションが再生され(デフォルト値)、「paused」のときは一時停止します。
hoverやjavaScriptと組み合わせて使用すると効果的です!

まとめ

いかがでしょうか?「アニメーションは難しい」という思考を崩せたでしょうか?
トランジションと設定が似ている部分もあるので応用ができると思います。
ぜひ実装のアイデアとして「こうやって動かせば良いのか」という閃きに貢献できれば嬉しいです。