[CSS]コピペで簡単にCSS3アニメーションを実装できるライブラリ・ツールのまとめ

CSS3アニメーションで、背景を変えたり、ボタンをバウンドさせたり、画像をフェードやフリップで表示したりなどをコピペで実装できるライブラリ、緩急をともなったイージングやトゥイーンの微調整を設定できるオンラインツールをまとめて紹介します。

サイトのキャプチャ

animatable

CSS3アニメーションの基本から、かっこいい応用までコピペで簡単に実装できます。
詳細:CSS3アニメーションの基本的な実装例のまとめ

サイトのキャプチャ

Animate.css

エレメントを目立たせたり、回転させたり、バウンドさせたりするアニメーションが簡単に実装できるスタイルシートのライブラリ。
詳細:classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート

サイトのキャプチャ

Easing Functions Cheat Sheet

デモで動きを確認しながら、緩急をともなったイージングのさまざまなアニメーションをコピペで実装できます。
詳細:緩急をともなったイージングのアニメーションをCSSやJSで実装する時のスニペット

サイトのキャプチャ

Morf.js - CSS3 Transitions with custom easing functions

エレメントをさまざまなアニメーションで動かすスタイルシートを生成します。
※Webkit Only

サイトのキャプチャ

liffect

リストで実装した複数の画像を24種類のかっこいいCSS3アニメーションで表示します。
詳細:フェード・スライド・バウンド・フリップ・スターウォーズなど、CSS3アニメーションのコードを自動で生成するオンラインツール

サイトのキャプチャ

Stylie

トゥイーンやキーフレームを使ったアニメーションを動作確認しながら作成できます。

サイトのキャプチャ

Cubic-bezier

cubic-bezier()の3次ベジェ曲線を使ったイージングのアニメーションを生成します。
※Webkit Only

サイトのキャプチャ

Ceaser

イージングのアニメーションをペジェ曲線で微調整できるオンラインツール。
※Webkit Only

top of page

©2017 coliss