クラスを指定するだけで37種類のアニメーションを実装できるスタイルシート「ALL ANIMATION CSS3」

2017/01/13

こんにちは。
今回はクラスを指定するだけで37種類のアニメーションを実装できるスタイルシート「ALL ANIMATION CSS3」です。

クラスを指定するだけで様々なアニメーションを実装できるCSSライブラリを紹介します。

クラスを指定するだけで37種類のアニメーションを実装できるスタイルシート「ALL ANIMATION CSS3」

ALL ANIMATION CSS3

all-animation-css3

http://all-animation.github.io/

 

「ALL ANIMATION CSS3」をダウンロードしてみよう!

http://all-animation.github.io/にアクセスして右にある「DOWNLOAD」のボタンをクリックしてダウンロードします。

 

「ALL ANIMATION CSS3」を設置してみよう!

all-animation.cssをhead内に読み込みます。

 

html部分を記述します。
journalの場合はjournalというクラス名を付けますよ。

 

journalの他にもdance、pulse、pulse-slow、jamp、four-rock、enter-up-bounce、enter-down-bounce、enter-right-bounce、enter-left-bounce、scale-bounce、jump-bounce、tree-flip-right、tree-flip、tree-flip-up、tree-flip-down、flip-left-bouncerotate-flip、rotate-flip、flip-right-bounce、flip-top、flip-left、flip-right、flip-bottom、rotate-flip-down、rotate-down-bounce、rotate-out、flash-bang、bomba、legend-down、legend-up、legend-left、legend-right、legend-flip、portrait-before、portrait-blur、scale-before、rotate-rowの37種類アニメーションが用意されていますよ。

 

CSSシークレット ―47のテクニックでCSSを自在に操る
CSSシークレット ―47のテクニックでCSSを自在に操る

 

いかがでしたか。手軽に様々なアニメーションを実装できるのでいいですね。
以上でクラスを指定するだけで37種類のアニメーションを実装できるスタイルシート「ALL ANIMATION CSS3」でした。

topへ戻る