今使用しているナビゲーションやタブやボタンにHTMLを汚さずにさまざまなアニメーションを適用できる -All Animation

ページ上のさまざまな要素やコンポーネントにclassを加えるだけで、CSS3アニメーションを適用できるスタイルシートを紹介します。
既存のナビゲーションやボタンにちょっとアニメーションを与えたい時にも最適です。

HTMLにclassを加えて汚したくない人は、jQueryやスクリプトでclassを加えて、クリーンな実装もできます。

サイトのキャプチャ

All Animation CSS3
All Animation -GitHub

All Animationのデモ

約40種類のCSS3アニメーションとさまざまな要素やコンポーネントに適用したデモを楽しむことができます。

デモのキャプチャ

デモ

最初のデモは、ボタンをトリガーにしたアニメーション。
ぷるぷるしたり、弾んだり、ぱたっとめくれたり、3Dに回転したりと、いろいろなものが揃っています。

デモのアニメーション

デモ: ボタン

リスト要素で実装されたアコーディオンも簡単にアニメーションで動かすことができます。

デモのアニメーション

コンポーネント: アコーディオン

リスト要素で実装されたタブには、フェードやスライドがいいですね。

デモのアニメーション

コンポーネント: タブ

フォームのボタンやチェックボックスもアニメーションを使ったかわいいデザインにすることができます。

デモのキャプチャ

コンポーネント: フォーム

All Animationの使い方

All AnimationはMITライセンスで利用でき、使い方は非常に簡単です。

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。

Step 2: classを加える

アニメーションさせたい要素にclassを加えるだけで完了。

Step 3: classをスクリプトで加える

classを加えるためにjQueryなどのスクリプトを使用すると、アニメーションで動かす要素とトリガーとなる要素を別々に指定することができます。
もちろん、HTMLは一切汚さずにアニメーションを設定できます。
例えば、HTMLはこんな感じ。

jQueryを使用すると、こんな感じに。
ボタンをクリックすると、div要素に「.dance」が加えられ、アニメーションします。

JavaScriptで記述すると、こんな感じに。

top of page

©2016 coliss