CODEWITHSUNDEEP
csscss-transitions
user745235
user745235

Reputation:

CSS - Transition on border not working fine

The CSS code: 

.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;
}

The HTML code:

<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>

The transition is working fine for all elements but border, it just appears at the end of 400ms, there is no effect on border.

What I'm trying to achieve is a effect like the new google gmail buttons.

Thanks in advance for any help

Upvotes: 8

Views: 8540

Answers (1)

tw16
tw16

Reputation: 29625

This is a pretty simple fix. You just need a border to already exist before the hover effect. So just set the border-right: 1px solid #fff; like below:

.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 */
}

Then the transition is effectively just changing the colour of the border instead of creating a border.

Upvotes: 13

Related Questions