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



  • 【JS】簡単な記述でCSSアニメーションを実装できる「AniJS」
  • anime.jsを使用したテキストエフェクト集「Moving Letters」
  • CSSで出力する三角形ジェネレーター「CSS Triangle Generator」
  • CSSをショートハンドに書き換えてくれる「SHRTHND」
  • コピペで使えるCSSアニメジェネレーター「WAIT! Animate」
RELATED POSTS
  • 【jQuery】動画を背景にフルスクリーンで表示させる「covervid.js」
  • 【jQuery】プレースホルダにアニメーションを実装できる「FoxHolder」
  • SVGで背景パターンを作成できる「Hero Patterns」
  • Googleが公開した日本語ウェブフォント「Google Fonts + 日本語早期アクセス」
  • グラデーションのアニメーションを実装できる「Granim.js」
  • CSSやHTML5・Twiterカードなどのコードを生成できる「Web Code Tools」
POPULAR POSTS
  • 【無料】漢字が使える日本語フリーフォント59選
  • 似たフォントを探したい!フォントを調べる時に役に立つツール・サイト10選
  • CSSグラデーションの作成に役立つジェネレーター・Webサービスまとめ
  • Youtubeの埋め込み動画をレスポンシブに対応させる方法
  • Photoshopで簡単に背景を伸ばすテクニック
RECENT POSTS
  • 無料で使用できるポップなフリーイラスト「illlustrations」
  • 宮崎県小林市が提供するお肉のフリー素材サイト「oniku images」
  • CSSでよく使うレイアウト・パターンをまとめたサイト「CSS Layout」
  • Neumorphismを簡単に作れるジェネレーター「Neumorphism.io」
  • マルチカラーグラデーションのコードをコピーできる「gradienta」