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

CSS CSS Transitions and Transforms Transition Timing Functions and Delays Timing Functions and Delays Challenge

Posted by Rebecca Soltis
Rebecca Soltis
8,919 Points

Finally, 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 ...."

style.css 
/* 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%;
}
index.html 
<!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
KRIS NIKOLAISEN
54,972 Points
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,972 Points

Task 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
KRIS NIKOLAISEN
54,972 Points
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,972 Points

You'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
Rebecca Soltis
8,919 Points

Thank 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
Rebecca Soltis
8,919 Points
Rebecca Soltis
Rebecca Soltis
8,919 Points

Thank you for your help!