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

Please Help, What am I doing wrong?

seems like i have it but it says I dont have it in the .icon rule, is it just being stubborn?

style.css
/* nav-item transitions ---------- */

.nav-item {
    flex-grow: 1;
  transition: flex-grow .5s;
  transition-timing-function: ease-out;
}

.nav-item:hover {
    flex-grow: 2;
  transition-delay: .4s
}

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

.icon {
  right: -25px;
  transition: right .4s;
  transition-delay: .3s;
  transition-timing-function: ease-in-out;

}

.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>
Giovanni Esposito
Giovanni Esposito
7,816 Points

Hi, Everything seems to be fine, even I've copied your code and test it, the only change that I did was remove the reference to page.css and add a semicolon (';') at the end of transition-delay: .4s of nav-item:hover.

I hope you find this useful.

1 Answer

Steven Parker
Steven Parker
204,000 Points

It looks like a new property "transition-delay: .4s" was added to the ".nav-item:hover" rule, but that was not asked for in the instructions.

Be careful to only do what the instructions ask, anything extra can cause the validation to fail (as it does here).

Thank You, can't believe I missed that I was getting very VERY frustrated!