CSSとSVGで作ったアニメーションがスゴイ - のんびり猫プログラマの日常

f:id:catprogram:20160331104555p:plain

CSSとSVGの威力をここまで発揮している作品はなかなかお目にかかれない。その上、可愛いときた。
こういうのを作ってみたいなぁと思うけど、私にその創作性と根性が無いのもよくわかってるんで、とりあえず鑑賞に留めておこう。

早速見てみよう。chromeでしか動かないので注意。
tympanus.net

DIVでパーツを組み立てて、CSSで色や形を指定。
SVGアニメーションでプルプル動かすということらしいが。

詳しい説明はこちら（英語）
tympanus.net

このアニメーションデモ画面を開いたまま
chromeのその他ツール▶デベロッパーツール▶窓が開くのでEscを押す▶
Console窓が開くので左の点々３つをクリック▶Animationを開いてみて欲しい。
Animationが時系列で表示される。

f:id:catprogram:20160331140258g:plain

だからなに？と言えばそうなんだけど、これどうやって指定してるんだ？と疑問の嵐。
専門外のことゆえサッパリわからんちん！だけど、面白すぎる。

それにしてもここまで細かく作るのは驚嘆に値する。
SVGアニメーション、ちょっと勉強しようかなぁ～