ちょっとしたアニメーションをホームページに入れるだけで、一気にオシャレな感じになります。
アニメーションするボタンはユーザーにボタンに気づいてもらいやすくなります。
慣れてしまえばとっても簡単!
WEB制作をしている方はぜひ覚えてくださいね。
CSSのアニメーションは、transitionとanimationの2つを覚える!
CSSでアニメーションをする方法は大きく2つあり、transitionとanimationの2つです。
transitionはある状態がある状態への遷移を表現し、
animationはキーフレームというもので中間の状態を詳細に制御し複雑な動作を表現することができます。
手軽に使えるtransitionと複雑な動きも自由に作れるanimation、状況によってどちらか好きな方を使えばいいのですが、
どちらか1つを覚えるとするとanimationの方が柔軟で応用性があるのでいいでしょう。
transitionとanimationのサンプル
まずはサンプルを見てみましょう、transitionとanimationを使ったアニメーションです。
See the Pen
フェードイン/フェードアウト transition by Yoshimune (@hachidaime)
on CodePen.
See the Pen
フェードイン/フェードアウト animation by Yoshimune (@hachidaime)
on CodePen.
実際にスタイルシートで指定しているアニメーションの部分というのは非常にシンプルです。
大きく以下のような手順で指定をします
- 開始時、終了時などの各状態をCSSで設定
- 設定した状態遷移のスピードやタイミングをtransitionやanimationで設定
transitionやanimationの指定の仕方は覚えないといけないですが、
その中で動きとして指定される状態はいままでのCSSで設定ができるので、
全体としては新しく学ぶところは多くは無いと思います。
CSSのアニメーションは、transitionとanimationの2つを覚える!
実際のtransitionやanimationの指定方法です。
詳細は、公式のリファレンスなどを参照してもらえたらと思いますので、ここではざっと概要を紹介しておきます。
transition
transitionは、ある状態からある状態への遷移に時間やスピード等の設定を加えることで、アニメーションをさせることができます。
- transition-delay:アニメーションの開始タイミング
- transition-duration:アニメーション時間
- transition-property:アニメーションを指定したいプロパティ
- transition-timing-function:アニメーションの変化パターン
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-name:アニメーション名(別で設定)
- animation-duration:アニメーションの時間
- animation-timing-function:アニメーションの速度変化
- animation-delay:アニメーション開始タイミング
- animation-direction:アニメーションの方向
- animation-iteration-count:アニメーションのループ回数
- animation-fill-mode:アニメーション前後の状態
- animation-play-state:アニメーションの再生、停止状態
使い方は同じく、これらのプロパティを一括で指定することができます。
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%; } }
これらを理解した上で、もう一度サンプルを見てみましょう。
難しいことはやっていませんので、ソースコードを見てもらえれば理解できるかと思います。
See the Pen
フェードイン/フェードアウト animation by Yoshimune (@hachidaime)
on CodePen.
ざっと紹介しましたが、アニメーションは実際に使ってみるとそんなに難しくはありません。
特にtransitionは手軽に使えます。
animationはパラメータが多いので面倒に感じるかも知れませんが、
自分なりのよく使うスピードやタイミングのベースクラスを作って用意しておけば、
あとは、遷移状態の@keyframesを作って参照するだけ使えます。
アニメーションはをうまく使うとおしゃれなホームページが簡単にできるので、
そんなに難しいものではないのでぜひ勉強してみてくださいね。
様々なサンプルをもとに、アニメーションを勉強できる本も出ていますので、ぜひじっくりと読んで勉強してみてください。
弊社ではアニメーションを使ったホームページを制作することも可能です。
ホームページの制作のご相談がありましたら、気軽にご相談はお問い合わせください。