CSSアニメーション制作に役立つライブラリ・ツール14選

 
スクロールアニメーションや、ホバーエフェクトでのアニメーションなど、CSSで要素にちょっとしたアニメーションを付けることも多いと思います。CSSアニメーションのライラブリやジェネレーターも多く公開されており、そのコードを見るだけでも参考になります。そんな中からCSSアニメーションを制作する時に役に立つCSSライブラリ・Webサイトを厳選して紹介します。





CSSアニメーション制作に役立つWebサイト



1

Animate.css

70種類以上のアニメーションを実装できるCSSライブラリ
2

Awesome CSS3 animation

80種類以上のアニメーションを実装できるCSSライブラリ
3

Vivify

60種類以上のアニメーションを実装できるCSSライブラリ
4

Wicked CSS3 Animations

24種類のアニメーションを実装できるCSSライブラリ
5

ALL ANIMATION CSS3

37種類のアニメーションを実装できるCSSライブラリ
6

Woah.css

20種類のアニメーションを実装できるCSSライブラリ
7

Magic Animations CSS3

65種類のアニメーションを実装できるCSSライブラリ
8

mimic.css

20種類のアニメーションを実装できるCSSライブラリ
9

CSShake

10種類のシェイクアニメーションを実装できるCSSライブラリ
10

Animista

ベースとなるアニメーションとオプションを設定するだけで、CSSを生成してくれるアニメーションジェネレーター
11

CSS Animations Generator

アニメーションを確認しながら個別にCSSをコピペできるサービス
12

WAIT! Animate

待機時間など指定できるループアニメーションのジェネレーター
13

Easing Function 早見表

アニメーションを制作する際に参考になるEasingの早見表。
14

cubic-bezier

ポイントをドラッグして好みのイージングを作成できるジェネレーター


CSSアニメーション制作のアイデア


コードコミュニティサイトCodepenで公開しているCSSアニメーションのアイデアから気になったデザインをピックアップしました。CSSアニメーション制作時に参考にしてみてください。

Css animation text

時間差で文字を出現させるCSSアニメーション

See the Pen Css animasyon yazı , Css animation text by Ayhan ALTINOK (@AyhanALTINOK) on CodePen.



Parallax Star background in CSS

背景でドッド(星)をスクロールさせるCSSアニメーション

See the Pen Parallax Star background in CSS by Saransh Sinha (@saransh) on CodePen.



Pure CSS Animated Checkbox

チェックした時をアニメーションで効果的に表現

See the Pen Pure CSS Animated Checkbox by Paweł Durczok (@north-of-rapture) on CodePen.



CSS-Only Glitch Effect

グリッチエフェクトのCSSアニメーション

See the Pen CSS-Only Glitch Effect by Justin (@nilbog) on CodePen.



Ants on Sugar CSS Animation

回転・移動でアリの動きを再現したCSSアニメーション

See the Pen Ants on Sugar CSS Animation by Stephen Fairbanks (@thathurtabit) on CodePen.



CSS Animation Material Design

マテリアルデザインをアニメーションで表現した作品

See the Pen CSS Animation Material Design by Michiel Bijl (@Michiel) on CodePen.



Mr JeellyFish pure CSS animation

パーツ毎にアニメーションを加えたダイナミックなCSSアニメーション

See the Pen Mr JeellyFish pure CSS animation by Fabio (@FabioG) on CodePen.



Candles (Pure CSS Animation)

キーフレームの使い方が秀逸なCSSアニメーション

See the Pen Candles (Pure CSS Animation) by Akhil Sai Ram (@akhil_001) on CodePen.



SVG bubble pop CSS animation

吹き出しを時間差で出現させるCSSアニメーション

See the Pen SVG bubble pop CSS animation by Demian (@demianpt) on CodePen.



CSS-Only Walking Dog

軽快に歩く犬のアニメーション

See the Pen CSS-Only Walking Dog by David Khourshid (@davidkpiano) on CodePen.


簡単なアニメーションから、凝ったアニメーションまで制作する参考にしてみてください。 以上、CSSアニメーションを制作する時に役に立つCSSライブラリ・ジェネレーター・Webサイトの紹介でした。




  • 様々なホバーエフェクトを実装できる「imagehover.css」
  • さまざまなスタイルのCSSボタンをコレクションした「Buttons」
  • 日本の契約書のためのCSSライブラリ「Keiyaku CSS」
  • Youtubeの埋め込み動画をレスポンシブに対応させる方法
  • UIデザインのスニペットがまとめられたサイト「CodeMyUI」
RELATED POSTS
  • マルチカラーグラデーションのコードをコピーできる「gradienta」
  • 初心者から学べる無料プログラミング学習サイト8選
  • モーフィングアニメーションのページ遷移を実装できる「Morphing Page Transition」
  • Font Awesomeをラインアイコンにしたアイコンセット「Line Awesome」
  • 【Webデザイン】Webサイト制作に役立つブックマークレット
  • SVGの背景パターンを手軽に作れるジェネレーター「SVG Backgrounds」
RECENT POSTS
  • ロゴ作成が簡単にできるロゴジェネレーター12選【無料・低価格】
  • 長いURLを短くするおすすめの短縮URLサービス8選
  • 【2020年版】Photoshopのブラシを追加する方法
  • Photoshopの代用になる無料で使える画像編集・加工ツール
PICKUP
  • WordPressのおすすめテーマ19選【無料版・有料版】
  • 【無料】おすすめのフリー画像・写真素材サイト10選【商用利用可】
  • 導入しておきたいWordPressのおすすめプラグイン
  • 【2020年版】無料で使えるフリーイラスト素材サイト30選(商用利用可)