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 trialRebecca Soltis
8,919 PointsFinally, give .icon a timing function that will gradually start and stop its transition.
I'm not sure why I'm not passing the last challenge task. I've tried to write the code both long and shorthand and I've looked at all of the questions posted in the community but it keeps asking me, "Are you sure that you used the keyword that ...."
/* nav-item transitions ---------- */
.nav-item {
transition: flex-grow .5s;
}
.nav-item:hover {
flex-grow: 2;
}
/* nav icon transitions ---------- */
.icon {
right: -25px;
transition-property: right .4s ease-in-out .3s;
}
.nav-item:hover .icon {
right: 12%;
}
<!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>
3 Answers
KRIS NIKOLAISEN
54,971 PointsTask 2 applies a timing function to .nav-item. The code below passes the challenge
/* nav-item transitions ---------- */
.nav-item{
flex-grow: 1;
transition: flex-grow 0.5s;
transition-timing-function: ease-out;
}
.nav-item:hover { flex-grow: 2; }
/* nav icon transitions ---------- */
/-----.icon {
transition-property: opacity;
transition-duration: .5s;
transition-delay: .3s;
transition: right .4s;
}------/
.icon {
right: -25px;
transition: right .4s ease-in-out .3s; }
.nav-item:hover .icon { right: 12%; }
KRIS NIKOLAISEN
54,971 PointsYou're missing the code for task 2 out of 5. Important: In each task of this code challenge, the code you write should be added to the code from the previous task
Rebecca Soltis
8,919 PointsThank you, Kris.
I just went through and re-did the challenge but I'm still getting the same message. It keeps referring to the timing function I'm using, regardless of how many times I change it. Here is my latest code:
/* nav-item transitions ---------- */
.nav-item{ flex-grow: 1; transition: flex-grow 0.5s; }
.nav-item:hover { flex-grow: 2; }
/* nav icon transitions ---------- */
/-----.icon { transition-property: opacity; transition-duration: .5s; transition-delay: .3s; transition-timing-function: ease-in; transition: right .4s; }------/
.icon { right: -25px; transition: right .4s ease-in-out .3s; }
.nav-item:hover .icon { right: 12%; }
Rebecca Soltis
8,919 PointsThank you for your help!