コピペでもOK！初心者向けCSSアニメーションの基礎入門編【Lesson1】
CSSアニメーションはコピペで再現できます！
前回はアニメーションの種類について簡単に解説をしました。
今回はCSSアニメーションの入門編ということで、CSSの書き方から簡単に解説していきます。
これまでCSSアニメーションを知らなかった方も、使い方を習得できるように、何回かに分けて解説していきます。
実際はコピペでもアニメーションは十分にできます。
アニメーション制作の中でもCSSアニメーションは、難易度も低く特別なソフトなども必要ないので最初に取り掛かるにはオススメのアニメーションです。
さっそくCSSアニメーションについて一緒に見ていきましょう！
CSSアニメーションとは？
まず、「CSSとは何？」と感じている方もいると思います。
CSSとは、カスケーディング・スタイル・シート（Cascading Style Sheets)の略称です。
一般的にはWEBページを作成するときに、HTMLやXHTMLで表示している要素を装飾するときに利用されます。
CSSを利用する場合には、HTMLを使うことも必要となります。
HTML自体はそんなに難しくはないので、CSSを勉強しながら徐々に習得していく感じで大丈夫です。
CSSアニメーションは、CSSを使って要素をアニメーションさせる技術のことです。
CSSアニメーションは、CSSのシートの中に書くだけで簡単に利用できるので、誰でも作ることができます。
CSSは無料で誰でも使うことができます！
よく読まれている記事
CSSアニメーションの利点
CSSアニメーションにはいくつかの利点があります。
メリット
- 初心者でも簡単に始められる
- JavaScriptがなくても実装できる
- 特別なソフトを使わずに無料で作れる
CSSアニメーションはハイスペックな有料ソフトを使わなくても、テキストが描けるソフトがあれば簡単に作れます。
もしくは、無料でHTMLやCSSの編集に特化したHTMLエディタもあります。
有名なものでいえばAtomやサクラエディタなどがあります。
HTMLエディタを使うことで、コードミスを減らしたり作業時間を短縮することができます。
今後ホームページを作るならアニメーションで差別化を図ることになるので、今のうちから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と組み合わせるとさらに複雑な動きもできそうですね！
よく読まれている記事
まとめ
今回CSSアニメーションを初めて知った方、魅力を感じていただけたでしょうか？？
本格的に使えそうなCSSアニメーションの実装は、次回から随時更新していきますので一緒に練習してみてください。
CSSアニメーションを使うだけで、ホームページの印象はガラッと変わります。
これをきっかけに、CSSアニメーションの世界を一緒に開拓していきましょう♪
最後までご覧いただきありがとうございました☆彡