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

How do you do this? Next, transition the right property of .icon over a duration of .4 seconds.

Next, transition the right property of .icon over a duration of .4 seconds.

Can you please give me all the steps to the challenge ?

best regards

Sheer

style.css
.nav-item { 
    transition-property: flex-grow;
   transition: .5s;
  transition: right .4s;
}   

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

}   

/* 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

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

You have placed this part of the code inside the first rule of your css. Move it into the icon rule as it states in the challenge the element it wants you to style.

which part of the code? where? i do not understand .

can you give me the answers to 3, 4, and 5?

Guil Hernandez
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Guil Hernandez
Treehouse Teacher

Hi michael Radvany,

It looks like your transition declaration is spot on, but it's inside the wrong CSS rule. If you move transition: right .4s; from the .nav-item rule to .icon, that should do it.

Hope this helps! :)