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>

除了边框，所有元素的过渡效果都很好，它只是在400ms结束时出现，对边框没有影响。

我想要达到的效果是像新的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 */
}

然后过渡有效地只是改变颜色的边界，而不是创建一个边界。