これはちょっと使いたくなる、キーフレームを使ったCSS3アニメーションのナビゲーション | コリス
Flashも無し、jQueryも無し、キーフレームを使ったCSS3アニメーションで実装したかっこいいドロップダウン型のナビゲーションを紹介します。 Two Level Superfishy Menu [ad#ad-2] デモ 実装 デモ デモはキーフレームのアニメーションを使用しているため、Chrome, Safari,Firefoxでご覧ください。 ※IE, Operaでは動作しません。 デモページ: アニメーション完了時 実装 HTML ナビゲーションはリスト要素で実装されており、第二レベルはリストの入れ子になっています。 <div id="container"> <ul id="nav"> <li><a href="#">Home</a></li> <li> <a href="#">About Us</a> <ul> <li><a href="#">What we do</a></l
CSS3 Animations；アニメーション - CSS3ウェブブラウザ実装メモ - 血統の森 web実験小屋
coding かつては4ブラウザの接頭辞を含めなければ動作しないという、スタイルシートがとんでもなく冗長になるということがあったが、2013年6月時点での実装では、webkit/blinkのみ接頭辞を用意すれば良い。 @keyframesの後にキーフレーム名を記述し、アニメーション変化の仕方を記述する。0%が始点、100%が終点となる。それぞれエイリアスでfromとtoのキーワードが用意されているが、今回のサンプルでは用いていない。 自然にループさせるために、0%と100%に同じプロパティを用意し、50%に変化させるプロパティを記述した。また、:hover擬似クラスでマウスを置いたときにアニメーションが開始するように仕向けておき、animation-iteration-count: infinite;として、無限ループするようにしてある。animation-nameで@keyframesで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
