-

CSSでアニメーションを作るのがグッと楽になるアニメーションライブラリまとめ

モダンブラウザの普及により、以前に比べるとCSS... / CSSアニメーションライブラリ / Animate.css他...全19件

モダンブラウザの普及により、以前に比べるとCSS3アニメーションを使う機会が増えてきています。CSSを使ったアニメーションは、プレフィックスが必要だったり、アニメーションの流れがコードを見ただけでは直感的に分かり辛かったり、自由に使いこなせるには慣れと経験が必要です。

そういった悩みを解決してくれるアニメーションライブラリが存在するのをご存氏でしょうか?ちょっとしたCSSアニメーションであればライブラリを使うことでいとも簡単に組み込むことができます。

そんなありがたーいライブラリを集めました。

CSSアニメーションライブラリ

Animate.css daneden.me: Animate.css | Just-add-water CSS Ani...

CSS3で定義できる様々なアニメーションをひとまとめにしたCSSアニメーションライブラリ。aminate.cssを読み込んで、アニメーションさせたい箇所にクラス名を定義するだけ。

magic css3 animations minimamente.com: magic css3 animations

前述のAnimate.cssとはまた一味違ったアニメーションエフェクトを備えたCSSアニメーションライブラリ。使い方はAnimate.cssと同様にお手軽。

Effeckt.css github.com: Effeckt.css

有志が各々発表しているアニメーション付きのUI部品を統一化しようというプロジェクト。将来的にはUI周りのアニメーション実装が必要なくなるかも。

Stylie jeremyckahn.github.io: Stylie. A graphical CSS animation t...

番外:CSS3のアニメーションをプレビューしながら作成・コード出力できるジェネレーター。ライブラリで実装できないアニメーションを作るときに便利。

JavaScriptで制御するCSSアニメーション

Anima lvivski.com: Anima — CSS animations with a soul

CSS3 transformsを使ったアニメーションを実装する時に便利なAPIを提供するJavaScriptライブラリ。

css-animations.js github.com: jlongster/css-animations.js · GitHub

CSS3のKeyframe Animationsを操作できるJavaScriptライブラリ。

Move.js visionmedia.github.io: Move.js - CSS3 animation framework f...

CSS3を使ったJavaScriptアニメーションフレームワーク。単体で使えるので他のライブラリに依存せずに使える。

最終更新日:2013-07-08 (23,972 views)

関連するトピックス

ページ上部に戻る