CSS3ではアニメーションの設定までできちゃうらしいですね。
しかし正式に勧告されているわけではないので、Web-kit系つまりSafariでしかどうさしません。
以前ちらっとCSSだけでアコーディオンメニューを作るみたいな記事があったので、それと連動してさらにアニメーションさせたら素敵やん。ということでやってみました。
例によってサンプルはさくらサーバーに。
http://paseo102.sakura.ne.jp/test/test.html
もちろんsafariじゃないとアニメーションしません。
それもアニメーション対象が中のdivだけしかうまく動作しないので、最初はいきなりパッってなります。もう少し詳しく調べればちゃんとできそうですね。
記述の仕方は、アニメーションさせたいものに
# -webkit-transition-propaty: all;
# -webkit-transition-duration: 1s;
# -webkit-transition-timing-function: ease-in-out;
この三つを指定してやる。
# -webkit-transition-propaty: all;
は、アニメーションさせるプロパティを指定するっぽいです。
っぽいってのは資料が少なくていまいちよくわからないからです。
英語読めません。
# -webkit-transition-duration: 1s;
これはアニメーションにかける時間ですね。
# -webkit-transition-timing-function: ease-in-out;
これはアニメーションの動きを指定するみたいです。
加速や減速がスムーズなので、下手にJavaScriptで自作するよりかっちょいい動きします。
