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

jimmy kim
jimmy kim
1,314 Points

dont know where is the error

i tried and tried, but the error persist

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

.nav-item {
    flex-grow: 1;
  transition-property: flex-grow;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;

}

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

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

.icon {
  right: -25px;
  transition-duration: 0.4s;
  transition-property:right;


}

.nav-item:hover .icon {
    right: 12%;
  transition-delay: .3s ;
right: -25px; 
transition-property: right; 
transition-duration: .4s; 
transition-delay: 3s;
transition-timing-function: ease-in-out;



}
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
204,000 Points

You've done some things beyond what the challenge asked for. In particular, the instructions don't ask for any changes to be made to the "hover" rule.

But also, starting from task 1, the instructions ask you do these things "Using the shorthand...". In the shorthand notation, you set all the values for a transition on the same line. But it looks like you've only used the individual properties here.