豊富なCSSアニメーションエフェクトを実装できる「effect.css」

no-image

effect.cssはAngular、React、jQuery、Bootstrap、QuantumUIのLESSで書かれたピュアCSSアニメーションエフェクトを実装することができます。かなり豊富な種類のアニメーションエフェクトが用意されています。

effect.css

デモ

デモでは、バウンス、フェード、フォール、フリップ、回転、スピードなどなど、たくさんの種類のアニメーションエフェクトを見ることができます。

バウンス1つとっても、.bounce、.bounce-in、.bounce-down、.bounce-up、.bounce-down-up、.bounce-up-down、.bounce-left、.bounce-right、.bounce-left-right、.bounce-right-leftといった種類があるのが驚きです。

200以上のキーフレームのアニメーションエフェクト、280のCSSアニメーションクラス、5つのアニメーションスピードオプション、jQuery互換性のための拡張パッケージ、Bootstrap互換性のための拡張パッケージと、優れた機能性を備えています。

また、少ないファイルを組み合わせることにより、必要とするエフェクトを含んだ独自パッケージを構築できるのも特徴の1つです。

実際のデモ動作は、各デモに設置された「Try Action」ボタンをクリックすると、そのアニメーションエフェクトが実行されます。詳細を見たい場合は、同じく各デモに設置された「Detail」ボタンからチェックできます。

というわけで、豊富なCSSアニメーションエフェクトをサイトに取り入れたいという人は、ぜひ「effect.css」を活用されてみてはいかがでしょうか。

effect.css

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

Archives