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

Now let's add an easing effect. Use the timing function that starts a transition suddenly, then slows it down towards th

Now let's add an easing effect. Use the timing function that starts a transition suddenly, then slows it down towards the end.

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

.nav-item {
    flex-grow: 1;
        transition: flex-grow .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>
Christopher Nowack
Christopher Nowack
2,468 Points

The challenge wants it to start suddenly, then ease out. Try using ease-out instead of ease-in

try the following answer:

.icon { transition-property: opacity; transition-duration: .5s; transition-delay: .3s; transition-timing-function: ease-out; }

2 Answers

Bogdan Cabaj
Bogdan Cabaj
16,118 Points

Hi,

You need to add 'ease-out' at the end of your transition property.

Please see more info about easing effects

Darryl Driedger
Darryl Driedger
Full Stack JavaScript Techdegree Student 24,724 Points

transition: <property> <duration> <timing-function> <delay>;

which would be:

transition: flex-grow .5s (add your ease-out function) and no need for a delay