とても変わった動きをする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アニメーションの勉強にはなるかと思います。良い使い所が思いついたら使ってみたいかと思います。