これはいい。ということでGoogle検索のツールパネルに適用してみた。
禺画像]※CSS アニメーションはFirefox 4.0からですので3.6以前では効果ありません。.4sがマウスがのってから開くまでの時間、.8sがマウスが離れてから閉じるまでの時間になります。
@-moz-document domain("www.google.co.jp"),
domain("www.google.com") {
#center_col {margin-left:8px!important;border-left:none!important;}
#leftnav{
position:fixed!important;
top:114px!important;
padding-left:4px!important;
padding-right:0px!important;
max-height:672px!important;
z-index:52;
}
#leftnav:not(:hover){
width:8px!important;
background-color:#eee!important;
-moz-transition:width 0s ease-in-out .8s !important;
}
#leftnav:not(:hover) > *{
background-color:#fff;
visibility:hidden!important;
-moz-transition:visibility 0s ease-in-out .8s !important;
}
#leftnav:hover{-moz-transition:width 0s ease-in-out .4s !important;}
#leftnav:hover > *{-moz-transition:visibility 0s ease-in-out .4s !important;}
#leftnav > div {width:151px!important;}
#leftnav:hover{border:1px solid red!important;}
/* ワンダーホイール対策 */
#tbt8{left:12px!important;}
}
画像検索で#leftnav:not(:hover) > *の-moz-transitionが効いてないようなんだけれど原因が分からない……見なかったことにしよう。orz
セコメントをする