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

Sági János
PRO
Sági János
Pro Student 6,185 Points

Hi please some solution

What's the property ? thanks all

style.css
/* 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%;
}
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>

2 Answers

Jake Salo
Jake Salo
13,175 Points

You need to transition the 'flex-grow' property. So the first argument should be the property you want to transition - Try this:

  transition: flex-grow .5s;
Rhys Kearns
Rhys Kearns
4,975 Points

width? height? transform? could be multiple