woah.css
woah.css

エキセントリックなアニメーションを多数収録したCSSフレームワーク 「Woah.css」

とても変わった動きをするCSSアニメーション「Woah.css」をご紹介します。
結構奇抜な動きをするアニメーションが多いので、使い所は難しいかもしれませんが、面白い動きもあったのでどこかで活用できたらなと思います。

Woah.cssデモ

Woah.cssのサイトにアクセスするとアニメーションデモを見ることができます。下図矢印部分のプルダウンメニューからアニメーションの種類を選択して [ Animate It ]ボタンでアニメーションのデモを確認することができます。

Wosh.css

アニメーション例(一部)

wowzors

spin3ddealWithlt

pulse

Wosh.cssの使い方

[ Download Woah.css ]ボタンより、CSSファイルをダウンロードします。

Download Woah.css

次に<head>内にCSSファイルを外部リンクで読み込み、アニメーションさせたいオブジェクトにclassを指定しwoahと選択したアニメーションのclass名を追加します。下のソースコードはアニメーションwowzorsを指定する場合の記述例です。また、classにinfiniteを追加すると繰り返すアニメーションになります。

<h1 class="woah wowzors">アニメーション設定例</h1>

なかなか使い所が思いつかないネタ系(?)のアニメーションが多いですが、CSSアニメーションの勉強にはなるかと思います。良い使い所が思いついたら使ってみたいかと思います。


JunJunWeb.Netの新着情報を受け取るには
SNSアカウントをフォローすると便利