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サイトの紹介でした。




  • SVGの背景パターンを手軽に作れるジェネレーター「SVG Backgrounds」
  • カエルのゲームでFlexboxを学べるサイト「Flexbox Froggy」
  • Youtubeの埋め込み動画をレスポンシブに対応させる方法
  • 【CSS】borderで枠線を作成する方法 -初心者向け-
  • CSSで作成する吹き出しとデザインのアイデア
RELATED POSTS
  • 手書き風SVGアニメーションを簡単に実装できる「vivus.js」
  • Google Mapのスタイルテンプレート「Snazzy Maps」
  • SVGで作成されたローディングアイコンセット「SVG Loaders」
  • 【jQuery】プレースホルダにアニメーションを実装できる「FoxHolder」
  • 【jQuery】ページ移動時にアニメーション効果をつけられるAnimsition
  • 【jQuery】スクロールで画像に3D効果を掛けられる「tiltedpage_scroll.js」
RECENT POSTS
  • バナーデザイン制作で参考になるバナー広告ギャラリーサイト12選
  • 【2021年版】 WordPressのおすすめテーマ17選(無料版/有料版)
  • 【2021年版】 無料で使えるフリー画像・写真素材サイト27選(国内/海外)
  • 【2021年版】 Google Fontsの使い方とおすすめ日本語フォント
POPULAR POSTS
  • 【2021年版】 無料で使えるフリーイラスト素材サイト33選(商用利用可)
  • 【無料】漢字が使える日本語フリーフォント70選
  • 【2021年版】 Google Fontsの使い方とおすすめ日本語フォント
  • フォントを調べる時に役に立つツール・サイト10選
  • 無料で使える日本語・英語のかわいいフリーフォント20選