CSS3 トランジションを使用して、選択またはホバー メニュー効果を作成しようとしています。これを行うには、border-left-width と padding-left を同時にアニメーション化します。境界線は 6 ピクセル増加し、パディングは 6 ピクセル減少します。どちらも 0.3 秒の速度です。
Chrome では、どちらも同じ速度でアニメーション化され、滑らかに見えます。IE では、トランジションは瞬時に行われ (明らかにトランジション/アニメーションはありません)、見栄えもよくなります。Firefox では、境界線とパディングが同時にアニメーション化されますが、異なる間隔で表示されるため、テキストとコンテナーが跳ね返り、ぎくしゃくして見えます。
ここに Fiddle の例があります: http://jsfiddle.net/crisp330/w7phH/1/ (FF と Chrome の違いを参照してください?)
ChromeのようにFireFoxでこれをスムーズにアニメーション化する方法はありますか? LI 内に別の要素を配置してアニメーション化するなどの代替手段を使用できることはわかっていますが、このアプローチはすっごくきれいです!
CSS3 トランジションの要点は次のとおりです (動作例については jsFiddle を参照してください)。
ul li {
padding-left: 12px;
border: 0 none;
}
ul li:hover {
padding-left: 6px;
border-left: 6px solid #d17519;
transition: border-left-width .3s, padding-left .3s;
-moz-transition: border-left-width .3s, padding-left .3s;
-webkit-transition: border-left-width .3s, padding-left .3s;
-o-transition: border-left-width .3s, padding-left .3s;
}