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

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

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%; }

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

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%; }

Thank you for your help!