Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
abdul faiz mohd jayramie eng
Courses Plus Student 4,478 PointsCSS3 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.
8 Answers
Guil Hernandez
Treehouse TeacherHi 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
39,199 PointsCan you post a "working" example using codepen.io?
John Riordan
Courses Plus Student 834 PointsYour 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
Courses Plus Student 4,478 Pointsthanks 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
39,199 Points@John - That's a slick example I like it :)
JP Nothard
3,846 Pointsyou could try this
.btn:visited { background-color:#523F44; }
abdul faiz mohd jayramie eng
Courses Plus Student 4,478 Pointsalmost 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.
connorkent
2,327 Pointsconnorkent
2,327 PointsThis 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. :)