スマートフォン向けのサイトでアニメーションさせたいとき、PCサイトのようにjQueryのanimateを使ってしまうと動きがガタガタになってしまい。これがWebアプリの限界なのかー。って叫びそうになりますが、そんなときはcss3の「translate3d」を使えば滑らかに動きますよ。

Flashサイトではよく見かけていると思いますが、画像にマウスオーバーするとボーダーが内側にアニメーションするあれをCSS3でやってみました。
Webkit系列やOperaでご覧下さい。Firefoxだとがたがたします、、、、

css3はアニメーションもできてしまうわけですが、ここではわりと簡単につくれるマウスオーバーアニメーションをご紹介いたします。
Chrome、Firefoxで動作確認しております。

CSS3はPC向けのサイトではまだまだかもしれませんが、スマートフォン向けのサイトでは回線速度の関係や、ブラウザが限定されている関係でむしろ積極的い使うべきなんだとか。
ということで重い腰を上げてCSS3を初めてようと思います。
まずはCSS3だけでグラデーションとかシャドウのかかったボタンを作成します。