とても変わった動きをするCSSアニメーション「Woah.css」をご紹介します。
結構奇抜な動きをするアニメーションが多いので、使い所は難しいかもしれませんが、面白い動きもあったのでどこかで活用できたらなと思います。
Woah.cssデモ
Woah.cssのサイトにアクセスするとアニメーションデモを見ることができます。下図矢印部分のプルダウンメニューからアニメーションの種類を選択して [ Animate It ]ボタンでアニメーションのデモを確認することができます。
アニメーション例(一部)
Wosh.cssの使い方
[ Download Woah.css ]ボタンより、CSSファイルをダウンロードします。
次に<head>
内にCSSファイルを外部リンクで読み込み、アニメーションさせたいオブジェクトにclassを指定しwoah
と選択したアニメーションのclass名を追加します。下のソースコードはアニメーションwowzors
を指定する場合の記述例です。また、classにinfinite
を追加すると繰り返すアニメーションになります。
なかなか使い所が思いつかないネタ系(?)のアニメーションが多いですが、CSSアニメーションの勉強にはなるかと思います。良い使い所が思いついたら使ってみたいかと思います。