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

Prakhar Patwa
Prakhar Patwa
11,260 Points

I am stuck in this last question, give .icon a timing function

error - are you writing inside the .icon rule? i don't know where i am wrong

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

.nav-item {
   transition-property: flex-grow;
   transition: .5s;

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

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

.icon {
  right: -25px;
  transition-property: right;
  transition-duration: .4s;
  transition-delay: .3s;
  transition-timing-function: ease-in-out;
.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

I passed using your answers, pasting in the ones called for by each task.

But I noticed two issues while doing so:

  • task 1 specifically asks you to use the shorthand property (but it accepted the individual ones)
  • I never saw any instruction to add to the .nav-item:hover rule, but above you added a transition-delay