Why the animation effect is gone

Asked

Viewed 25 times

0

I’m doing a side sidNav, I was able to animate it but the effect that the animation makes goes away, when the animation ends, I wanted to know why this is happening

My code

<!DOCTYPE html>
<html>
<head>
    <title>Sid nav</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <nav>
        <ul class="nav">
            <li><a href="">Home</a></li>
            <li><a href="">Contato</a></li>
            <li><a href="">Sobre</a></li>
        </ul>
    </nav>
</body>
</html>

My css

*{
    margin:0;
    padding: 0;
}
.nav{
    list-style-type: none;
    display: flex;
    flex-direction: column;
    width: 20%;
    text-align: center;
    transform: translateX(-300px);
    z-index: 1;
    animation: animaSidNav 1s 1;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, .4);
}
.nav li
{
    border: 1px solid #f1f1f1;
}
.nav li a{
    text-decoration: none;
    padding: 10px 20px;
    display: block;
    color: #fff;
}

@keyframes animaSidNav{
    100%{
        transform: translateX(0);
    }
}
html css

1 answer

0

Just add forwards to the animation, thus: animation: animaSidNav 1s 1 forwards;

The property is "implicit", if you only need to adjust the forwards as apply other "classes" (selectors) to overwrite, but do not want to rewrite all use then:

animation-fill-mode: forwards;

Example:

*{
    margin:0;
    padding: 0;
}
.nav{
    list-style-type: none;
    display: flex;
    flex-direction: column;
    width: 20%;
    text-align: center;
    transform: translateX(-300px);
    z-index: 1;
    animation: animaSidNav 1s 1 forwards;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, .4);
}
.nav li
{
    border: 1px solid #f1f1f1;
}
.nav li a{
    text-decoration: none;
    padding: 10px 20px;
    display: block;
    color: #fff;
}

@keyframes animaSidNav{
    100%{
        transform: translateX(0);
    }
}
    <nav>
        <ul class="nav">
            <li><a href="">Home</a></li>
            <li><a href="">Contato</a></li>
            <li><a href="">Sobre</a></li>
        </ul>
    </nav>

The possible values are:

animation-fill-mode: none; /*padrão*/
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

If you have multiple animations you can adjust:

animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

And you can match animation-direction (or animation-iteration-count) to adjust directions and iterations in the animation.

Read more on:

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.