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

Stef Nep
Stef Nep
UX Design Techdegree Student 9,701 Points

Hi - I can't seem to get past this question. I placed transition: .5s; under .nav-item but it keeps saying I'm wrong.

Is this not the shorthand? Please let me know what I am doing wrong.

/* nav-item transitions ---------- */

.nav-item {
    flex-grow: 1;
  transition: .5s;

.nav-item:hover {
    flex-grow: 2;

/* nav icon transitions ---------- */

.icon {
  right: -25px;

.nav-item:hover .icon {
    right: 12%;
<!DOCTYPE html>
    <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">
    <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>


2 Answers

Rabin Gharti Magar
.a{fill-rule:evenodd;}techdegree seal-36
Rabin Gharti Magar
Front End Web Development Techdegree Graduate 18,428 Points

Hey Steffy Neptune,

You were very close. The only thing you are missing is a transition-property, it specifies the name of the CSS property the transition effect is for.

.nav-item {
    flex-grow: 1;
  transition: flex-grow .5s;

Hope this helps!