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




\ Webデザインに関するお役立ち情報を定期的に配信中 /

Follow @webclips_jp

PopularPosts
  • 漢字が使える日本語フリーフォント97選(商用利用可)
  • 無料で使えるフリーイラスト素材サイト55選(商用利用可)
  • 無料で使える日本語・英語のかわいいフリーフォント20選
  • 無料で使えるデジタル風フォント13選
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • ビジネス系イラストをダウンロードできるフリー素材サイト7選
WordPress対応! 初心者におすすめのレンタルサーバー特集
RecentPosts
  • 【2024年9月】Adobeのセール時期はいつ頃? Adobeセールの最新情報
  • 【2024年9月版】WordPress対応のおすすめレンタルサーバー比較 ( 初心者向け )
  • 【2024年度】Adobe CC(Creative Cloud)を安く買う方法
  • Photoshopで使用できる“水しぶき系”ブラシ8選
  • 無料で使えるフリーイラスト素材サイト55選(商用利用可)
  • アイソメトリックイラストをダウンロードできるフリー素材サイト6選