実は簡単!CSSアニメーションを覚えてホームページをリッチにしよう


こんにちは、今回はCSSのアニメーションについて紹介します。
ちょっとしたアニメーションをホームページに入れるだけで、一気にオシャレな感じになります。
アニメーションするボタンはユーザーにボタンに気づいてもらいやすくなります。
慣れてしまえばとっても簡単!
WEB制作をしている方はぜひ覚えてくださいね。

CSSのアニメーションは、transitionとanimationの2つを覚える!

CSSでアニメーションをする方法は大きく2つあり、transitionanimationの2つです。

transitionある状態がある状態への遷移を表現し、
animationキーフレームというもので中間の状態を詳細に制御し複雑な動作を表現することができます。
手軽に使えるtransitionと複雑な動きも自由に作れるanimation、状況によってどちらか好きな方を使えばいいのですが、
どちらか1つを覚えるとするとanimationの方が柔軟で応用性があるのでいいでしょう。

transitionとanimationのサンプル

まずはサンプルを見てみましょう、transitionとanimationを使ったアニメーションです。

transition

See the Pen
フェードイン/フェードアウト  transition
by Yoshimune (@hachidaime)
on CodePen.

animation

See the Pen
フェードイン/フェードアウト  animation
by Yoshimune (@hachidaime)
on CodePen.

実際にスタイルシートで指定しているアニメーションの部分というのは非常にシンプルです。
大きく以下のような手順で指定をします

  • 開始時、終了時などの各状態をCSSで設定
  • 設定した状態遷移のスピードやタイミングをtransitionやanimationで設定

transitionanimationの指定の仕方は覚えないといけないですが、
その中で動きとして指定される状態はいままでのCSSで設定ができるので、
全体としては新しく学ぶところは多くは無いと思います。

CSSのアニメーションは、transitionとanimationの2つを覚える!

実際のtransitionanimationの指定方法です。
詳細は、公式のリファレンスなどを参照してもらえたらと思いますので、ここではざっと概要を紹介しておきます。

transition

transitionは、ある状態からある状態への遷移に時間やスピード等の設定を加えることで、アニメーションをさせることができます。

transition

CSSの指定方法は、一括で行うこともできるし、個別でプロパティを指定することもできます。
一括の場合は、次のように、スペースで区切ってそれぞれのプロパティを指定します。

transition: width 4s ease-in-out 1s;

個別にプロパティを指定したいときは、このような感じですね。

transition-delay: 1s;
transition-duration: 4s;
transition-property: width;
transition-timing-function: ease-in-out;

もう一度、先ほどのサンプルを見てみましょう。

See the Pen
フェードイン/フェードアウト  transition
by Yoshimune (@hachidaime)
on CodePen.


まずは、単純にマウスオーバーで四角の色を変えています。

.changecolor{
  background: #2ea181;
}

.changecolor:hover{
  background: #e14bac;
}

そこへ、
transition:1s all ease-in-out;
で動きのタイミングや変化を追加しています。

.changecolor{
  transition:1s all ease-in-out; /* トランジションの設定 */
  background: #2ea181;
}

.changecolor:hover{
  background: #e14bac;
}

考え方としては簡単ですね。

animation

次はanimationです。
こちらは、transitionと違って、キーフレームというものを使ってもっと複雑に細かく動作を指定することができます。
A → B という状態の遷移だけでなく、A → B → C → D といったような複数の状態を遷移することができます。

animation

使い方は同じく、これらのプロパティを一括で指定することができます。

animation: 3s ease-in 1s 2 reverse both paused slidein;

個別で指定することときは、こんな感じですね。

animation-name: slidein;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-iteration-count: 2;
animation-direction: reverse;
animation-fill-mode: both;
animation-play-state: paused;

さて、この中でanimation-name以外はあらかじめ値が用意されていますが、
animation-nameについては、自分で作る必要があります。
この、animation-nameアニメーションの内容を自分で作ってそこに名前を付けたものを指定します。
では、次にアニメーションの内容を実際に作ってみましょう。

キーフレームの設定

このキーフレームと言う言葉は聞いたことありますか。
昔ですとFLASH、今だと動画編集でキーフレームという言葉が見られると思います。
一連の遷移の中で、その起点となる部分、変換点をキーフレームと呼びスタートからゴールまでの間に、複数の状態遷移を設定し、それを経由するように変化させることでアニメーションさせます。
キーフレームでは時間帯とその時の状態を指定することで、状態遷移を設定します。
それに対して、animationのプロパティでスピードやタイミング等の指定をすることでアニメーションの全体が決定します。
書き方は次の通りで、@keyframesの後にanimation-nameで指定する名前を設定します

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

ソースコードを見るのが一番わかりやすいと思いますが、
全体の状態遷移に対して10% 30%などの割合のタイミングでそれぞれの状態に遷移させることができます
0%が開始地点、100%が終了地点です。
それぞれの状態は普段使っているCSSのプロパティです。
位置やサイズ、透明度などを変化させてアニメーションさせることが多いでしょう。
それをアニメーションでつなげることで、全体のアニメーションができるということです。
このキーフレームの設定では、アニメーションの動きを指定するだけでそのスピードやタイミングなどは、先程のアニメーションで設定することになりますね。

また、開始から終了までの2点で遷移を設定する場合は、
fromやtoというキーワードを使うこともできます

@keyframes slidein {
  from {
    top: 0; left: 0;
  }

  to {
    top: 100px; left: 100%;
  }
}

これらを理解した上で、もう一度サンプルを見てみましょう。
難しいことはやっていませんので、ソースコードを見てもらえれば理解できるかと思います。

animation

See the Pen
フェードイン/フェードアウト  animation
by Yoshimune (@hachidaime)
on CodePen.

ざっと紹介しましたが、アニメーションは実際に使ってみるとそんなに難しくはありません
特にtransitionは手軽に使えます。
animationはパラメータが多いので面倒に感じるかも知れませんが、
自分なりのよく使うスピードやタイミングのベースクラスを作って用意しておけば、
あとは、遷移状態の@keyframesを作って参照するだけ使えます。
アニメーションはをうまく使うとおしゃれなホームページが簡単にできるので、
そんなに難しいものではないのでぜひ勉強してみてくださいね。

様々なサンプルをもとに、アニメーションを勉強できる本も出ていますので、ぜひじっくりと読んで勉強してみてください。

弊社ではアニメーションを使ったホームページを制作することも可能です。
ホームページの制作のご相談がありましたら、気軽にご相談はお問い合わせください。

大阪のホームページ制作会社YCOMの制作サービスのご紹介