モダンブラウザの普及により、以前に比べるとCSS3アニメーションを使う機会が増えてきています。CSSを使ったアニメーションは、プレフィックスが必要だったり、アニメーションの流れがコードを見ただけでは直感的に分かり辛かったり、自由に使いこなせるには慣れと経験が必要です。
そういった悩みを解決してくれるアニメーションライブラリが存在するのをご存氏でしょうか？ちょっとしたCSSアニメーションであればライブラリを使うことでいとも簡単に組み込むことができます。
そんなありがたーいライブラリを集めました。
CSS3で定義できる様々なアニメーションをひとまとめにしたCSSアニメーションライブラリ。aminate.cssを読み込んで、アニメーションさせたい箇所にクラス名を定義するだけ。
前述のAnimate.cssとはまた一味違ったアニメーションエフェクトを備えたCSSアニメーションライブラリ。使い方はAnimate.cssと同様にお手軽。
有志が各々発表しているアニメーション付きのUI部品を統一化しようというプロジェクト。将来的にはUI周りのアニメーション実装が必要なくなるかも。
Animate.cssのLESS版。
番外：CSS3のアニメーションをプレビューしながら作成・コード出力できるジェネレーター。ライブラリで実装できないアニメーションを作るときに便利。
CSS3 transformsを使ったアニメーションを実装する時に便利なAPIを提供するJavaScriptライブラリ。
CSS3のKeyframe Animationsを操作できるJavaScriptライブラリ。
CSS3を使ったJavaScriptアニメーションフレームワーク。単体で使えるので他のライブラリに依存せずに使える。
モダンブラウザの普及により、以前に比べるとCSS3アニメーションを使う機会が増えてきています。CSSを使ったアニメーションは、プレフィックスが必要だったり、アニメーションの流れがコードを見ただけでは直感的に分かり辛かったり、自由に使いこなせるには慣れと経験が必要です。
そういった悩みを解決してくれるアニメーションライブラリが存在するのをご存氏でしょうか？ちょっとしたCSSアニメーションであればライブラリを使うことでいとも簡単に組み込むことができます。
そんなありがたーいライブラリを集めました。
CSSアニメーションライブラリ
Animate.css daneden.me: Animate.css | Just-add-water CSS Ani...
CSS3で定義できる様々なアニメーションをひとまとめにしたCSSアニメーションライブラリ。aminate.cssを読み込んで、アニメーションさせたい箇所にクラス名を定義するだけ。
Animate.css | Just-add-water CSS Animations
http://daneden.me/animate/magic css3 animations minimamente.com: magic css3 animations
前述のAnimate.cssとはまた一味違ったアニメーションエフェクトを備えたCSSアニメーションライブラリ。使い方はAnimate.cssと同様にお手軽。
magic css3 animations
http://www.minimamente.com/magic-css3-animations/Effeckt.css github.com: Effeckt.css
有志が各々発表しているアニメーション付きのUI部品を統一化しようというプロジェクト。将来的にはUI周りのアニメーション実装が必要なくなるかも。
Effeckt.css
http://h5bp.github.io/Effeckt.css/Animate.less github.com: machito/animate.less · GitHub
Animate.cssのLESS版。
machito/animate.less · GitHub
https://github.com/machito/animate.lessStylie jeremyckahn.github.io: Stylie. A graphical CSS animation t...
番外：CSS3のアニメーションをプレビューしながら作成・コード出力できるジェネレーター。ライブラリで実装できないアニメーションを作るときに便利。
Stylie. A graphical CSS animation tool.
http://jeremyckahn.github.io/stylie/JavaScriptで制御するCSSアニメーション
Anima lvivski.com: Anima — CSS animations with a soul
CSS3 transformsを使ったアニメーションを実装する時に便利なAPIを提供するJavaScriptライブラリ。
Anima — CSS animations with a soul
http://lvivski.com/anima/css-animations.js github.com: jlongster/css-animations.js · GitHub
CSS3のKeyframe Animationsを操作できるJavaScriptライブラリ。
jlongster/css-animations.js · GitHub
https://github.com/jlongster/css-animations.jsMove.js visionmedia.github.io: Move.js - CSS3 animation framework f...
CSS3を使ったJavaScriptアニメーションフレームワーク。単体で使えるので他のライブラリに依存せずに使える。
Move.js - CSS3 animation framework for JavaScript
http://visionmedia.github.io/move.js/関連するトピックス