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
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsFinally, give .icon a timing function that will gradually start and stop its transition.
Am stuck on this task I wonder if there is anybody who can help me out. I thought I had it right but my answer keeps being rejected:
``` .icon { right: -25px; transition-property: right; transition-duration: .4s; transition-timing-function: ease-in-out, ease-out;
}```
/* nav-item transitions ---------- */
.nav-item {
flex-grow: 1;
transition-property: flex-grow;
transition: .5s;
transition-timing-function: ease-out;
}
.nav-item:hover {
flex-grow: 2;
}
/* nav icon transitions ---------- */
.icon {
right: -25px;
transition-property: right;
transition-duration: .4s;
transition-timing-function: ease-in-out, ease-out;
}
.nav-item:hover .icon {
right: 12%;
transition-delay: .3s;
}
<!DOCTYPE html>
<html>
<head>
<title>CSS Transitions</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="page.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<nav class="nav">
<a class="nav-item" href="#">About <i class="icon material-icons">person</i></a>
<a class="nav-item" href="#">Work <i class="icon material-icons">work</i></a>
</nav>
</div>
</body>
</html>
15 Answers
Shawn Ramsey
27,237 PointsYou were close. You'll need to add your transition delay directly to your icon and not when the .nav-item is hovered. In my experience, transitions are rarely added only to the hover state. Also, your timing function can be simply written as ease-in-out without writing ease-out after it. Hope that helps!
.icon {
right: -25px;
transition-property: right;
transition-duration: .4s;
transition-delay: .3s;
transition-timing-function: ease-in-out;
}
Abdirahman Shire
12,987 PointsYou could also use short hand method..
/* nav icon transitions ---------- */
.icon {
right: -25px;
transition: right .4s ease-in-out .3s;
}
Kyle Zapirain
6,524 PointsSee i have tried to submit code in shorthand like you have here Abdirahman.. but it says "Oops! It looks like Task 1 is no longer passing." :l will try typing all transition properties instead.
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsThanks @Shawn I get it. Also tell me, how do you post code here? Isn't you do it with three back ticks followed by your code and another three back ticks ```? I tried that and It failed.
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsThanks @Shawn I get it. Also tell me, how do you post code here? Isn't you do it with three back ticks followed by your code and another three back ticks ```? I tried that and It failed.
Shawn Ramsey
27,237 PointsYou're welcome. You can write code by opening with three backticks followed directly by the type of code written: css, html, javascript etc... then write your code and close it with three backticks only. I always keep the backticks on their own individual line.
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsThanks again, I tried the backticks but first time I failed. Let me try again:
.icon {
right: -25px;
transition-property: right;
transition-duration: .4s;
transition-delay: 3s;
transition-timing-function: ease-in-out;
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 Points.icon {
right: -25px;
transition-property: right;
transition-duration: .4s;
transition-delay: .3s;
transition-timing-function: ease-in-out;
}
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsApologies for the alerts Shawn, but got it now! Thanks again hey!
Shawn Ramsey
27,237 PointsLooks like you nailed it. Glad I could help out.
Hannah Flynn
21,429 PointsI tried that but it didin't work. the error states of this question: "Are you writing the transition properties inside the '.icon' rule?"
Hannah Flynn
21,429 PointsCan u help me Shawn?
Shawn Ramsey
27,237 PointsI just double checked the original code I posted above as an answer for the quiz and It works fine. All answers passed. If you haven't passed the quiz yet, it's probably just a simple typo somewhere. I'll be happy to help if you have questions, I'll be available the rest of the evening.
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsHannah Flynn Hi I hope Shawn is still on this thread I tried to tag him but can't find his name. If you can please post your code here I will try to look at it later tonight. Cheers
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsHannah Flynn The correct code should be this one
.icon {
right: -25px;
transition-property: right;
transition-duration: .4s;
transition-delay: .3s;
transition-timing-function: ease-in-out;
}
Hannah Flynn
21,429 PointsI'm sorry, Christopher. That didn't help out. Look at the code and see where is the correct spot for it. But I see 1 thing that we should never do in the code: If I change from right to left in the transition-property side of the code, then task 3 will no longer process. Where is the correct spot for the .icon code in task 5? Shawn, you should see this message too. I'm sure it can help you.
Shawn Ramsey
27,237 PointsThe following code will complete all questions in the code challenge.
/* nav-item transitions ---------- */
.nav-item {
flex-grow: 1;
transition-property: flex-grow;
transition: .5s;
transition-timing-function: ease-out;
}
.nav-item:hover {
flex-grow: 2;
}
/* nav icon transitions ---------- */
.icon {
right: -25px;
transition-property: right;
transition-duration: .4s;
transition-delay: .3s;
transition-timing-function: ease-in-out;
}
.nav-item:hover .icon {
right: 12%;
}
Hannah Flynn
21,429 PointsThank you Shawn. You are right. Christopher, thanks for trying, but I see that we both got the hang of it.
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 Points@Hannah, I used the code provided by Shawn and it worked perfectly and that's the one I just gave above before Shawn now gave the whole code. Good luck on your coding and thanks for engaging us.
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 Points@Hannah, I used the code provided by Shawn and it worked perfectly and that's the one I just gave above before Shawn now gave the whole code. Good luck on your coding and thanks for engaging us.