初心者OK! CSSアニメーションで動きのあるwebサイトにする方法をまとめました
Webサイトにはマウス重ねると色が変わる、文字が出てくるなどの“動き”がありますよね。要所で使われていると、わかりやすさもオシャレ度もアップします。「実装してみたいけど、JavaScript苦手だしな」と思っている方に朗報。実は、CSSだけで作れるものもたくさんあるんです！
CSSアニメーションの仕組み、初心者の方でもすぐにコピペで使えるスニペット集まで、CSSアニメーションの概要と学習・実装に役立つサイトを紹介します。
- CSSアニメーションと、実装に必要な知識を知ろう
- transitionプロパティで手軽にCSSアニメーション効果を加える
- animationプロパティ+@keyframesで、本格的CSSアニメーションを実装する
- CSSアニメーション制作の時短リンク集
CSSアニメーションと、実装に必要な知識を知ろう
CSSアニメーションとは
CSSアニメーションとは、Webページ上の要素に動きをつける技術。HTMLに書かれている要素のスタイルを時間の経過に応じて変化させることで、アニメーションとして表示することが出来る機能のことです。複雑なJavaScriptを使わずにCSSだけで実現でき、初心者にも扱いやすいのが特徴です。
下記のIzmirというホバーアニメーションも、CSSのみで作られています。
CSS3でアニメーションが使えるようになったことで、CSS設定のみでアニメーション効果をWebページに付けられるようになりました。非対応だったInternet Explorerのサポートが終了したこともあり、Webサイト上で広く使われる表現手法となっています。
MDN Web DocsではCSSアニメーションの大きな３つのメリットが紹介されています。書かれているCSSアニメーションの３大メリットを簡単にまとめると、以下の内容です。
- 簡単（JavaScriptを知らなくてもCSS知識があればOK）
- 軽い（誰が組んでもシステム不可を高めにくい）
- パフォーマンス効率が良い（ブラウザが最適化する）
CSSアニメーションの種類
CSSアニメーションには「CSS Transition」「CSS Animation」という２つの機能があります。
【CSS Transition】
- きっかけ（ページを読み込んだ、マウスカーソルを重ねたなど）によってアニメーションがスタートする
- アニメーションの再生は1回のみ
- 再生後にはプロパティが元の設定に戻る
【CSS Animation】
- 自動でアニメーションの再生が出来る（きっかけが要らない）
- ループ（再生終了後も同じアニメーションを繰り返す）可能
- アニメーション再生後のプロパティを決められる
詳細はのちほど、それぞれの項目にわけてご紹介します。
CSSアニメーション実装のために必要な基礎知識
CSSアニメーションはHTML＆CSSの基礎知識があれば実装することが出来る、という点が最大の魅力です。コピペで使える小技集などコードを配布してくれているサイトもありますしね。
とは言え、コピペだけでは限りがあり、痒いところに手が届かない…なんて事も結構あります。下記３つのCSS知識があると、自作やアレンジが捗ります。
- transformプロパティ：要素を変形させる
- positionプロパティ：要素を任意の位置に配置
- 疑似クラス/疑似要素：マウスホバーした時などを指定できる
簡単にそれぞれの概要と、学習におすすめのサイトを紹介します。
1.要素を変形するtransformプロパティ
cssのtransform（トランスフォーム）は、要素を拡大・縮小したり、回転させるなど“変形”させることができるプロパティです。例えば、正方形のdivを菱形や平行四辺形にしたり、マウスを重ねると文字をズームさせる事ができます。
CSS transformの使い方を理解して要素を変形する
https://shu-sait.com/css-transform-tukaikata/
2.要素の位置を決めるpositionプロパティ
cssのposition（ポジション）プロパティは、要素を画面上の好きな位置に配置することが出来るプロパティです。マウスを重ねるとズレていた部分が重なるボタン、クリックで画像をすサイトさせたいときなどにも使います。
CSSのpositionを総まとめ！absoluteやfixedの使い方は？
https://saruwakakun.com/html-css/basic/relative-absolute-fixed
3.セレクタとして使える疑似クラス/疑似要素
擬似クラスは「:hover」など特定の状況下にある要素を、cssセレクタとして扱うことが出来るというものです。この仕組によって「マウスが要素に重なった時」などのスタイル指定が出来ます。
疑似要素は「::aftaer」など、セレクタとして使用することで要素の特定の部分にスタイルを指定できるというもの。画像にcssでフィルターを掛けたり、この文章の最初の文字だけ大きくしたいという時にも使えます。
【初心者向け】CSSの擬似要素と擬似クラスを理解しよう！
https://www.asobou.co.jp/blog/web/css2
まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする
transitionプロパティで手軽にCSSアニメーション効果を加える
CSS Transitionについて知る
transitionは直訳すると遷移や変遷を意味します。
CSSのtransitionプロパティでは、何らかのきっかけ(hover・click等のアクション)でCSS プロパティの値が変化する際のアニメーション速度を設定することが出来ます。
CSS トランジションの使用
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
簡単に言ってしまえば、transitionプロパティは要素が変化する時間を指定するもの。
単純なアニメーションなら、シンプルな設定で実装できることがメリットです。
transitionプロパティで使用できる値についてはtransition - MDN Web Docsで一覧が紹介されています。
また、下記のサイトではよりわかりやすくtransitionを解説されています。
各プロパティ値の違いを、実際に動かして見ることが出来ますよ。
移ろいゆくアニメーションを表現するCSS「transition」について解説
https://haniwaman.com/css-transition/
transitionによるCSSアニメーションを使う
テキストリンクを装飾する
テキストリンクにマウスオーバーで色を変える設定は、ナビゲーションの装飾にもよく使われていますね。
コピペでできる！CSS3の素敵効果でテキストリンクを装飾する小技あれこれ
https://www.webcreatorbox.com/tech/css3-text-link
マウスオーバーで画像に説明を表示
メディアサイトなどでは、サムネイル画像にカーソルを重ねると概要・説明テキストが出てくるという効果もよく見かけます。必要時以外は画像だけが表示されているので、全体的にスッキリと見えるのもメリット。
画像のマウスオーバー時に文字を表示させるエフェクトをCSSで実装
https://kubogen.com/web-programing-203/
animationプロパティ+@keyframesで、本格的CSSアニメーションを実装する
CSS Animationについて知る
animationは名前の通り、CSSアニメーションの設定ができるプロパティです。
transitionと大きく異なるのは@keyframesという＠規則を使って、どのタイミングで・どんなプロパティ変化を起こすかを別途定義する必要があるという点です。
この仕組から「キーフレームアニメーション」とも呼ばれています。
例えば、以下のように背景色を指定したボタンの場合。
- デフォルト：赤色
- ホバー時：青色
transitionでは文字色の変化を赤→黒→青にすることは出来ませんよね。
しかしanimationを使用すると、こうした変化途中の設定も細かく行うことが出来ます。
animation・keyframesを徹底解説
https://webdesignday.jp/inspiration/technique/css/5167/
CSSアニメーションのスニペット集を見てみよう
@keyframesを使うことで、より自由度の高いcssアニメーションを作成することが出来ます。
自作もできますが、複雑な設定になるといきなりイチから作るのは大変。まずはCSSスニペット集などを活用して、色や速度などをカスタマイズして使ってみる方法がおすすめです。
CSSアニメーション学習や作成に役立つサイトをご紹介します。
CSS Animo
ホバーエフェクトやボタン、ローディングなどのCSSアニメーションが公開されています。
使いたいものをクリックすれば、CSSコードがコピーできるという便利仕様。見ているだけでも勉強になります。
Single Element CSS Spinners
https://projects.lukehaas.me/css-loaders/
Webサイトの読み込み中に見かける、ローディングアニメーションもCSSアニメーションで作られている事がほとんどです。
イチから自作しようと思うと大変なので、コードを配布してくれているサイトを活用させていただくことも多いです。下記サイトでは背景色等を設定し、それを反映させたCSSコードをコピーすることが出来ますよ。
The Largest Library of Open-Source UI
こちらは、ユーザー投稿型のスニペットサイトです。
CSSアニメーションに限らず、ありとあらゆるUIパーツが投稿されていて、見ているだけでも楽しいです。
CSSアニメーション制作の時短リンク集
CSSアニメーションのライブラリ３選
上記のようなスニペット集からコードをコピーして使うほか、CSSライブラリを使用するとより簡単に実装することも出来ます。活用すると、短時間で効率的にサイトの装飾ができますね。
Animate.css
Animate.cssは色々な種類のCSS3アニメーションを実装することが出来るCSSライブラリです。
使い方はanimate.min.cssを読み込み、アニメーションさせたい要素にクラスを付けるだけ。簡単に実装できます。
VOV.CSS
https://vaibhav111tandon.github.io/vov.css/
VOV.CSSはオーソドックスなアニメーションが網羅されているCSSライブラリです。
スタイルシートファイルはCDNで読み込むことも可能なので、より手軽に実装できますね。
Izmir Hover Effects
冒頭でも登場した、素晴らしく綺麗な画像ホバーエフェクトを実装できるCSSライブラリ。
https://ciar4n-izmir.netlify.app/#/
CSS（izmir.min.css）を読み込ませて、HTMLでIzmir定義のCSSクラスを追加するだけと使用方法は簡単。左サイドバーの「Customisation」と開くと、見本と必要なHTML構造・CSSクラスなどが確認でき、親切です。
CSSアニメーション作成に役立つツール4選
ライブラリを使わず自作したい、という時に役立つのがCSSアニメーション作成をサポートしてくれるWebツール。画面でプレビューを見ながらプロパティ値やキーフレームのタイムラインを設定することで効率よくCSSアニメーションを作成できます。
Easings.co
transition-timing-functionやanimation-timing-functionプロパティの値として使用する、アニメーションのイージング（加速度）を確認・調整できるオンラインツールです。自分でベジェ曲線を作成し、確認することも出来ます。
Animista
Animistaでは様々なCSSアニメーション、バリエーションが用意されています。
OPTIONSパネルを使って自分で値の調整を行うことも可能。
コードボタンをクリックすると必要なクラス設定+@keyframesが表示されます。
CSSファイルを丸ごと読み込むライブラリとは異なり、必要なCSSのみをコピーできるので軽量化を心がけている方にも嬉しいツールですね。
Web Code Tools
WebCode Toolsは、Web開発者向けにさまざまな無料ツールやジェネレーターを提供するプラットフォームです。一番上にある「Keyframe Animation」を開くと、プレビューを見ながらキーフレームアニメーションのスタイル選択・カスタマイズが出来ます。
https://webcode.tools/css-generator
アニメーション以外にも、主要CSSプロパティのプロパティ値ごとのプレビューなども確認できます。直感的にCSSを掴みたい、という方は色々と触ってみてもよいでしょう。
Keyframe.app
Keyframe.appはTransform ,color,positionなどのプロパティの指定と、@keyframeアニメーションタイムラインをプレビューで見ながら作成できるツールです。CSSアニメーションの作成は「Create an Animation」から行えます。
完成したコードは緑色の「 { } Get CSS」からコピーすることが出来ます。
そのほかシャドウジェネレーター、カラージェネレータもありますよ。
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
12月8日まで