woah.css

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

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

Woah.cssデモ

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

Wosh.css

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

wowzors
spin3d
dealWithlt
pulse

Wosh.cssの使い方

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

Download Woah.css

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

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


著者について

Junji Yamamoto
Junji Yamamoto

広島県広島市育ち、現在岡山でWeb制作の仕事をしています。主に「Web関連で勉強したこと、役立つアイディア」をテーマにした内容を備忘録としてブログに書いています。大学卒業後は勤務している会社のWeb制作を担当。小規模サイトから大学公式サイトの制作・運営などに携わっています。

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