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

CSS transition

Hi - I hope you are well. I need to give the .icon to gradually start and stop. Ease-in-out right?? I tried separating the code by: .icon {right: -25 px; transition: right} and then .nav-item: hover .icon {right: 12%, transition-duration .4s; transition-delay: .3s; transition-timing-function: ease-in-out}
Then I also did it with the shorthand listed in the code below - Neither answer seems to work. Any ideas or comments??

ty

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

.nav-item {
    flex-grow: 1;
  transition: flex-grow;
}

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

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

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

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

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 87,406 Points

Hi there!

I see what you're trying to do, but you need to put the transition in the .nav-item selector . So what happens is the right position property and value will go there and then you call the transition in the regular selector.

You can also use a shorthand for the transition so you don't have to include the transition duration property at all.

Like so.

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

.nav-item:hover {
    flex-grow: 2;
}
/* nav icon transitions ---------- */

.icon {
  right: -25px; 
  transition: right .4s ease-in.3s;
}

.nav-item:hover .icon {
    right: 12%;
}