CSSアニメーションの基礎【Animationを使ってみる】

ウェブ制作技術

おはようございます、ヒグチです。

ウェブページにいろいろと動きをつけられる、CSSアニメーション。
前回は「transition」について説明しました

今回はもう一方の「animation」に入門してみます。

CSS3

CSS Animation

CSS Transitionの特徴は、次のようなものでした。

  • スタートとゴールの値をスムースに遷移させる
  • hoverなどのきっかけが必要

プログラミング

シンプルなTransitionに対し、CSS Animation はより細かい設定が可能です。
スタートとゴールの値だけでなく、その間の値も設定できますし、hoverなどのきっかけも不要です。

CSS Animationには、次のような特徴があります。

  • 細かい区値の設定が可能(キーフレーム)
  • hoverなどのきっかけが不要
  • ループが可能

キーフレームという概念が出てきました。
Flashを使っていた人なら馴染みがあるかもしれませんが、アニメーションのポイントをいくつか設定し、高度なアニメーションを実現するものです。

キーフレームは、たとえばこんなふうに書きます。

@keyframesというプロパティに任意の名前をつけます(ここではanim01)。
そして、fromからtoまでの間にあるポイント(たとえば30%や60%)にキーフレームを作り、cssの値を設定します。
これを変化させてアニメーションを作るわけです。

プログラミング

で、キーフレームを作ったら、アニメーションさせたい要素に、cssで指定してあげます。
たとえばこんなふうに。

簡単なanimationを実装したサンプルをご覧ください。

See the Pen CSS Animation01 by daisukehiguchi (@daisukehiguchi) on CodePen.

どうでしょうか、動いてますでしょうか。

animationの記述方法

「animation-name」とか「animation-iteration-count」とか出てきましたが、これがanimationのプロパティです。
transitionのプロパティは4つでしたが、animationは6つあります。

  • animation-name:アニメーションの名前(@keyframesの指定)
  • animation-duration:アニメーションにかかる時間
  • animation-timing-function:アニメーションの変化率
  • animation-iteration-count:アニメーションの繰り返し回数
  • animation-direction:アニメーションの再生方向
  • animation-delay:アニメーション開始の遅れ時間

duration、timing-function、delayなどは、transitonと同じですね。

それでは、それぞれもう少し細かく見てみます。
プログラミング

animation-name

animation-nameは、アニメーションの名前を指定します。
具体的には、前述の@keyframesで登録した名前を指定します。
デフォルト値は「none」で、この場合は、アニメーションが実行されません。

@keyframesでは、width、height、colorなどさまざまなCSSプロパティの値を設定し、変化させることができます。

プログラミング

animation-duration

animation-durationは、アニメーションにかかる時間を指定します。
単位は、秒(s)またはミリ秒(ms)です。
デフォルト値は0sです。

プログラミング

animation-timing-function

animation-timing-functionは、アニメーションの変化率(変化の具合)を指定します。
デフォルト値はeaseです。

指定できる値は以下です。

  • ease:インとアウトをなめらかに
  • linear:一定
  • ease-in:ゆっくりイン
  • ease-out:ゆっくりアウト
  • ease-in-out:ゆっくりインしてゆっくりアウト
  • cubic-bezier(値, 値, 値, 値):独自に設定

プログラミング

animation-iteration-count

animation-iteration-countは、アニメーションの繰り返し回数を指定します。
基本的には数値で指定します。
デフォルト値は1で、アニメーションは1回だけ指定されます。

なお、整数以外で指定すると、再生途中でアニメーションが終了します。

また、無限にループさせたい場合はinfiniteと指定します。

プログラミング

animation-direction

animation-directionは、アニメーションの再生方向を指定します。
デフォルト値はnormalで、これ以外に alternate が指定できます。

  • normal:通常方向の再生
  • alternate:奇数回では通常方向、偶数回では逆方向の再生

プログラミング

animation-delay

animation-delayは、アニメーション開始のタイミングを指定します。
単位は、秒(s)またはミリ秒(ms)です。
デフォルト値は0sです。

プログラミング


いかがでしたでしょうか?

「transition」と「animation」はぞれぞれに特長があるので、用途に応じて使い分けたいですね。

CSS Transitionの記事も振り返っていただけたら幸いです。

あなたのビジネスのWeb戦略を、ぜひキタックにおまかせください。

効果を出すためのサイト運営、集客できるウェブ広告

ブログの更新情報をお知らせしています。