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

blake littleton
blake littleton
14,255 Points

Finally, give .icon a timing function that will gradually start and stop its transition?

I tried to use the shorthand method but it task 3 ended up not passing as a result. So I used the long method. But it hasn't yielded any real results.

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

/* nav icon transitions ---------- */
.icon{
  right: -25px;
  transition-property: right;
  transition-duration: .4s;
  transition-delay: .3s;
  transition-timing-function: ease-in-out;
}

.nav-item:hover .icon {
    right: 12%;
  transition-delay: .3s;
}
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>

1 Answer

Steven Parker
Steven Parker
203,990 Points

It looks like you did a little bit too much.

The shorthand would probably be just fine. But you did something extra that the challenge did not ask for. In the rule for "nav-item:hover .icon" you added a transition-delay setting. Just remove that and you should pass the challenge.