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

Is this not right?

I don't know what i'm doing wrong as every time I click check work it just says 'Make sure you're including the correct transition duration.'

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

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

.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>


1 Answer

Steven Parker
Steven Parker
204,000 Points

The instructions say "...transition the flex-grow property of .nav-item over .5 seconds."

But this code is setting it to the larger value of .6s instead.

Yeah I though it meant any number greater than .5.

Steven Parker
Steven Parker
204,000 Points

Oh I see! You can possibly interpret the word "over" as "greater than" instead of "during". You might want to make a suggestion to the Support folks about a rephrasing to clarify the objective.

Anyway, glad I could help. You can mark a question solved by choosing a "best answer".
And happy coding!