CSS - 国境に移行正常に動作しない

Question

CSSコード：

.css3_nudge ul li a { 
    -webkit-transition-property: color, background-color, padding-left, border-right; 
    -webkit-transition-duration: 400ms, 400ms, 400ms, 400ms; 
} 

.css3_nudge ul li a:hover { 
    background-color: #efefef; 
    color: #333; 
    padding-left: 50px; 
    border-right: 1px solid red; 
} 

HTMLコード：

<div class="css3_nudge nudge"> 
    <ul> 
     <li><a href="#" title="Home">Home</a></li> 
     <li><a href="#" title="Blog">Blog</a></li> 
     <li><a href="#" title="About">About</a></li> 
     <li><a href="#" title="Register">Register</a></li> 
     <li><a href="#" title="Contact">Contact</a></li> 
    </ul> 
</div> 

遷移は、すべての要素が、境界の正常に動作している、それだけで最後に表示されます境界線には何の影響もありません。

私が達成しようとしているのは、新しいGoogle Gmailのボタンのような効果です。任意の助けを事前に

おかげ

Answer 1

は、これはかなり簡単な修正です。ホバー効果の前に既に存在する境界線が必要です。だから以下のようborder-right: 1px solid #fff;を設定：

.css3_nudge ul li a { 
    -webkit-transition-property: color, background-color, padding-left, border-right; 
    -webkit-transition-duration: 400ms, 400ms, 400ms, 400ms; 
    border-right: 1px solid #fff; /* added property */ 
} 

そして転移を効果的にちょうど境界の色を変化させる代わりに境界を作成しています。