« フォーカスするとラベルがスライドして表示されるjQuery | トップページ | Loading...の「...」をアニメーションさせるjQueryのプラグイン »

2010年11月 8日 (月)

気持ちよくアニメーションするCSS3のナビ

今回は、css3で作られた、カーソルを載せると気持ちよく伸びていくナビゲーションのご紹介です。
デモページはこちらに、なります。

CSSの内容はデモページのCSSを参照してください。

設定する項目は3つです
transition-property(アニメーションさせる要素の指定)
transition-duration(アニメーションさせる時間の指定)
transition-timing-function(アニメーションさせる速度の指定)

非常に簡素に記述されていて、簡単に応用ができますので、ぜひ一度使ってみてください。

|

« フォーカスするとラベルがスライドして表示されるjQuery | トップページ | Loading...の「...」をアニメーションさせるjQueryのプラグイン »

css」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1378074/37564257

この記事へのトラックバック一覧です: 気持ちよくアニメーションするCSS3のナビ:

« フォーカスするとラベルがスライドして表示されるjQuery | トップページ | Loading...の「...」をアニメーションさせるjQueryのプラグイン »