初心者OK! CSSアニメーションで動きのあるwebサイトにする方法をまとめました

26日 2月

JavaSctipt不要。HTML+CSSのみでWEBサイトに動きをつけよう

Webサイトにはマウスを画像に重ねると文字が出てくる、ローティングマークが回るなどの“動き”がありますよね。要所で使われていると、わかりやすさもオシャレ度もアップします。

「敷居が高そう」「JavaScriptが分からないと実装できないでしょう」…なんて思われがちですが、実はこうしたアニメーションはCSS基礎知識があれば簡単に作ることが出来ますよ!

今回はCSSアニメーションの仕組み、初心者の方でもすぐにコピペで使えるスニペット集まで、CSSアニメーションの概要と学習・実装に役立つサイトを紹介します。

 

CSSアニメーションと、実装に必要な知識を知ろう

CSSアニメーションとは

CSSアニメーションは、CSSを使用してHTMLに書かれている要素をアニメーションとして表示することが出来る機能のことです。
下記のIzmir HoverもJavaScriptを使わず、CSSのみで作られています。

Izmir Hover Effects

CSS3でアニメーションが使えるようになったことで、CSS設定のみでアニメーション効果をWebページに付けられるようになりました。非対応だったInternet Explorerのサポートが終了したこともあり、Webサイト上で広く使われる表現手法となっています。

MDN Web DocsではCSSアニメーションの大きな3つのメリットが紹介されています。より簡単に言うと、CSSアニメーションのメリットは下記の通り。

  • 簡単(JavaScriptを知らなくてもCSS知識があればOK)
  • 軽い(誰が組んでもシステム不可を高めにくい)
  • パフォーマンス効率が良い(ブラウザが最適化する)

CSSアニメーションの種類

CSSアニメーションには「CSS Transition」「CSS Animation」という2つの機能があります。

【CSS Transition】

  • きっかけ(ページを読み込んだ、マウスカーソルを重ねたなど)によってアニメーションがスタートする
  • アニメーションの再生は1回のみ
  • 再生後にはプロパティが元の設定に戻る

【CSS Animation】

  • 自動でアニメーションの再生が出来る(きっかけが要らない)
  • ループ(再生終了後も同じアニメーションを繰り返す)可能
  • アニメーション再生後のプロパティを決められる

詳細は下記、それぞれの項目でご紹介します。

CSSアニメーション実装のために必要な基礎知識

CSSアニメーションはHTML&CSSの基礎知識があれば実装することが出来る、という点が最大の魅力です。コピペで使える小技集などコードを配布してくれているサイトもありますしね。

とは言え、コピペだけでは限りがあり、痒いところに手が届かない…なんて事も結構あります。
下記3つのCSSについて知っていると、自作やアレンジが捗ります。

  1. transformプロパティ:要素を変形させる
  2. positionプロパティ:要素を任意の位置に配置
  3. 疑似クラス/疑似要素:マウスホバーした時などを指定できる

簡単にそれぞれの概要と、学習におすすめのサイトを紹介します。

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

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を使用すると、こうした変化途中の設定も細かく行うことが出来ます。

【CSS】animation・keyframesを徹底解説
https://webdesignday.jp/inspiration/technique/css/5167/

CSSアニメーションのスニペット集を見てみよう

@keyframesを使うことで、より自由度の高いcssアニメーションを作成することが出来ます。

自作もできますが、複雑な設定になるといきなりイチから作るのは大変。まずはCSSスニペット集などを活用して、色や速度などをカスタマイズして使ってみる方法がおすすめです。

キーフレームアニメーション作成に役立つサイトをご紹介します。

CSS Animo

ホバーエフェクトやボタン、ローディングなどのCSSアニメーションが公開されています。使いたいものをクリックすれば、CSSコードがコピーできるという便利仕様。
見ているだけでも勉強になります。

CSS Animo
https://cssanimo.netlify.app/

CSSeffectsSnippets

CSSeffectsSnippetsもCSS Animoと同じような仕組みで、よく見かけるCSSアニメーション(エフェクト)が一覧で表示されています。

CSSeffectsSnippets
https://emilkowalski.github.io/css-effects-snippets/

Single Element CSS Spinners

Webサイトの読み込み中に見かける、ローディングアニメーションもCSSアニメーションで作られている事がほとんどです。

イチから自作しようと思うと大変なので、コードを配布してくれているサイトを活用させていただくことも多いです。下記サイトでは背景色等を設定し、それを反映させたCSSコードをコピーすることが出来ますよ。

Single Element CSS Spinners
https://projects.lukehaas.me/css-loaders/

CSSアニメーションを実装できるライブラリ3選

上記のようなスニペット集からコードをコピーして使うほか、CSSライブラリを使用するとより簡単に実装することも出来ます。活用すると、短時間で効率的にサイトの装飾ができますね。

Animate.css

Animate.cssは色々な種類のCSS3アニメーションを実装することが出来るCSSライブラリです。使い方はanimate.min.cssを読み込み、アニメーションさせたい要素にクラスを付けるだけ。簡単に実装できます。

Animate.css
https://animate.style/

VOV.CSS

VOV.CSSはオーソドックスなアニメーションが網羅されているCSSライブラリです。スタイルシートファイルはCDNで読み込むことも可能なので、より手軽に実装できますね。

VOV.CSS
https://vaibhav111tandon.github.io/vov.css/

Izmir Hover Effects

素晴らしく綺麗な画像ホバーエフェクトを実装できるCSSライブラリ。
こちらもCSS(izmir.min.css)を読み込ませてクラスを追加するだけで実装可能です。

Izmir Hover Effects
https://ciar4n.com/izmir/

Animate.cssやVOV.CSSよりもクラス設定等が複雑ですが、
View Documentation > Customisationで設定方法が掲載されています。

CSSアニメーション作成に役立つツール3選

ライブラリを使わず自作したい、という時に役立つのがCSSアニメーション作成をサポートしてくれるWebツール。画面でプレビューを見ながらプロパティ値やキーフレームのタイムラインを設定することで効率よくCSSアニメーションを作成できます。

Easings.co

transition-timing-functionやanimation-timing-functionプロパティの値として使用する、アニメーションのイージング(加速度)を確認・調整できるオンラインツールです。自分でベジェ曲線を作成し、確認することも出来ます。

Easings.co
https://easings.co/

Animista

Animistaでは様々なCSSアニメーション、バリエーションが用意されています。
OPTIONSパネルを使って自分で値の調整を行うことも可能。

コードボタンをクリックすると必要なクラス設定+@keyframesが表示されます。
CSSファイルを丸ごと読み込むライブラリとは異なり、必要なCSSのみをコピーできるので軽量化を心がけている方にも嬉しいツールですね。

Animista
https://animista.net/

Keyframe.app

Keyframe.appではTransform ,color,positionなどのプロパティの指定と、@keyframeアニメーションタイムラインをプレビューで見ながら作成できるツールです。
完成したコードは緑色の{}Get CSSからコピーすることが出来ます。

Keyframe.app
https://keyframes.app/

CSSアニメーションの作成は「Create an Animation」から行えます。
そのほかシャドウジェネレーター、カラージェネレータもありますよ。

Web制作のプロになろう!スキルハブの無料ビデオ

無料ビデオ14講座/98レッスンが受け放題!

わかりやすい動画レッスンHTML/CSS, JS, デザイン, WordPress, Railsなどがなんと無料。 募集人数には制限があります。サインアップはお早めに。

無料申し込み期限: 4月25日 まで
募集人数: 100名(残りわずか)

今すぐ14講座を受講する(無料)




×