コピペでもOK！初心者向けCSSアニメーションの基礎入門編【Lesson1】
前回はアニメーションの種類や始め方について簡単に解説をしました。今回はCSSアニメーションの入門編ということで、CSSの書き方から簡単に解説していきます。これまでCSSアニメーションを知らなかった方も、使い方を習得できるように、何度かに分けて解説していきます。実際はコピペでもアニメーションは十分にできます。
アニメーション制作の中でもCSSアニメーションは、難易度も低く、特別なソフトなども必要ないので最初に取り掛かるにはオススメのアニメーションです。CSSアニメーションについて一緒に学んでいきましょう。
① CSSアニメーションとは？
まず、CSSとは何？と感じている方もいると思いますので。CSSは、カスケーディング・スタイル・シート（Cascading Style Sheets)の略称です。一般的にはWEBページを作成するときに、HTMLやXHTMLで表示している要素を装飾するときに利用されます。CSSを利用する場合には、HTMLを使うことも必要となります。
HTML自体はそんなに難しくはないので、CSSを勉強しながら徐々に習得していく感じで大丈夫です。
CSSアニメーションは、CSSを使って要素をアニメーションさせる技術のことです。CSSアニメーションは、CSSのシートの中に書くだけで簡単に利用できるので、誰でも作ることができます。
② CSSアニメーションの利点
CSSアニメーションにはいくつかの利点があります。
・初心者でも簡単に始められる
・JavaScriptがなくても実装できる
・無料で作れる
CSSアニメーションはハイスペックな有料ソフトを使わなくても、テキストが描けるソフトがあれば簡単に作れます。今後ホームページを作るならアニメーションで差別化を図ることになるので、今のうちからCSSアニメーションを身につけていきましょう。
③ CSSアニメーションの書き方
CSSアニメーションは大きく分けて『Transition』と『Animation』があります。その中にもいくつかの種類があり、これらを組み合わせることで複雑なCSSアニメーションを作ることができます。
Transitionの種類
- transition ★よく使うもの
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
Animationの種類
- animation ★よく使うもの
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
全て覚えなくても大丈夫です。
★がついているところが基本の形になります。
★から下は、より細かくいろんなパターンで作りたい時に使うもので、あとからの変更が簡単になります。
ここについては次回に詳しく解説しますね。
④ 簡単なCSSアニメーションを作成してみよう
とりあえず、簡単なCSSアニメーションを実装してみましょう。
▼transitionの簡単なCSSアニメーション
transitionは始まりと終わりまでの２点間の動きの指定ができます。
See the Pen
mdEdBjw by haruka noda (@hana4525)
on CodePen.
buttonにマウスをのせてみてください。滑らかに大きくなる動きになっています。
transition: 300ms linear;
↑この行で変化の設定をしています。
- ・300msは300ミリ秒（0.3秒）の速さで動く設定
- ・linearは動き方の指定で、等しい速さで動く設定
あとはhover時に大きさ（width: 270px;）を指定するだけで、簡単にアニメーションが完成しました。
これだけでも楽しいアニメーションが色々できそうですよね。
▼animationの簡単なCSSアニメーション
animationはtransitionよりもさらに細かい指定ができ、キーフレームを併用して使います。
See the Pen
BazamQG by haruka noda (@hana4525)
on CodePen.
時間の経過に連れてbuttonが徐々に大きくなっています。
animation: btn-big 3s ease infinite;
↑この行で変化の設定をしています。
- ・btn-bigはキーフレームの名前を設定
- ・3sは3秒の速さで動く設定
- ・easeは動き方の指定で、等しい速さで動く設定
- ・infiniteは回数の指定で、無限に動く設定
あとはキーフレーム@keyframes btn-big{}の中に動きの指定を入れます。
0% {transform: scale(.3);}
↑スタート（0%）時点では基準の大きさに対して30%のサイズにする設定です。同じ容量で半分（50%）と終わり（100%）の時点での大きさを設定します。
これだけで時間の経過につれて変化するアニメーションができました。
transitionと組み合わせるとさらに複雑な動きもできそうですね。
5. まとめ
今回CSSアニメーションを初めて知った方にも、魅力は伝えられたでしょうか・・・。本格的に使えそうなCSSアニメーションの実装は、次回から随時更新していきますので、見ながらコピペしながら練習してみてください。CSSアニメーションを使うだけで、ホームページの印象はガラッと変わりますよ。
最後までご覧いただきありがとうございました。