CSSアニメーション制作に役立つライブラリとアイデア

スクロールアニメーションや、ホバーエフェクトでのアニメーションなど、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サイトの紹介でした。




PICK UP
RELATED POSTS
  • UIデザインのスニペットがまとめられたサイト「CodeMyUI」
  • コピペで使えるCSSアニメジェネレーター「WAIT! Animate」
  • 【jQuery】要素をふわふわ動かすプラグイン「jqFloat.js」
  • 【jQuery】Youtubeの動画サムネイルをアニメーション表示させる「PreViewTube.js」
  • 【CSS】スターウォーズのイントロを表現できるライブラリ「starwarsintro.css」
  • ブロックのアニメーションエフェクトが美しい「Block Reveal Effects」
POPULAR POSTS
  • 長いURLを短くするオススメの短縮URLサービス
  • 無料で使用できるフリーイラスト素材サイトまとめ
  • 漢字が使えるおすすめの日本語フリーフォントまとめ
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア
  • CSSで簡単に作れるおしゃれな見出しデザイン20選
RECENT POSTS
  • プライス・値段表示などに使えそうな英数字フォント13選
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2019年4月版】
  • 無料で使えるレトロ・ヴィンテージな雰囲気の英語フォントまとめ
  • Photoshopで簡単に背景を伸ばすテクニック
  • CSSで作成する吹き出しとデザインのアイデア