Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

abdul faiz mohd jayramie eng
PLUS
abdul faiz mohd jayramie eng
Courses Plus Student 4,478 Points

CSS3 transition border-radius?

i dont think there is such transition for border-radius property. i'm having a little trouble on my current project for my navigation bar. What i am trying to achieve is when user mouseOver my navigation links, a CSS3 transition should occur. Such as:

.btn:hover {
    padding: 10px 15px 10px 15px;
    color: white;
    background-color:#523F44;
    border-radius: 100px;
}

here is my navigation transition code:

div.nav a {
-moz-transition: all .51s;
-o-transition: all .51s;
-webkit-transition: all .51s;
transition: all .51s;
 }

what i am actually trying to achieve is, to create a transition for border-radius + color property to be visible when user mouseOver. My problem is, although its pretty minor, when set Transition to ALL, it will add transition to my mouseActive, such as:

.btn:active {
    background-color: #977985;
}

i do not want transition to occur when mouse is activate. how do i work this around? there is no border-radius property in CSS3 transition.

This problem has made one of the code challenges in the html track impossible to complete. You would expect a solution to pop up 2 flipping years after this problem emerged, but nope. Thanks Bill Gates. :)

8 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Hi Abdul,

Nice work on the nav transitions! If you're trying to remove the transition on active, you can add the following:

.btn:active {
  background-color: #977985;
  border-radius: 50px;
      -webkit-transition-property: none; 
 }

Also, the keyword value “all” is the initial value for "transition-property" , so you can actually leave it out in your animation declarations. Hope this helps!

James Barnett
James Barnett
39,199 Points

Can you post a "working" example using codepen.io?

Your selectors look a little funky. I'm not sure what your markup looks like but I'll make a little example.

nav ul li {
   padding: 10px 15px 10px 15px;
   color: white;
   background-color:#523F44;

   border-radius: 50px;

   -moz-transition: all .51s;
   -o-transition: all .51s;
   -webkit-transition: all .51s;
   transition: all .51s;
  }

And on hover...

nav ul li:hover {
   border-radius: 50px;
  }

Note place your transition properties in the selector that you're using to style your navigation normally, and just state which property that you want to change in the :hover selector.

Maybe this will help? http://codepen.io/john-riordan/pen/sIyuL

Good luck!

abdul faiz mohd jayramie eng
PLUS
abdul faiz mohd jayramie eng
Courses Plus Student 4,478 Points

thanks guys!! but..its not quiet there yet. What i am trying achieve is to eleminate the transition for active. My mistake, i should post a sample website along with the codes. I never tried codepen, i copied sample from my project, here: http://codepen.io/faizarmani/pen/peyBc

btw, my markup is a mess! Look up from line 166, you'll get the idea from there.

James Barnett
James Barnett
39,199 Points

@John - That's a slick example I like it :)

you could try this

.btn:visited { background-color:#523F44; }

abdul faiz mohd jayramie eng
PLUS
abdul faiz mohd jayramie eng
Courses Plus Student 4,478 Points

almost there, but that eliminate the whole color for active. what im into is to avoid transition for active and preserving its current applied color. thx btw, kinda interesting to see what it does with that solution.