Dude your code had some minor errors in both CSS and HTML. I'll give you an explanation of your problem, and a way to resolve it with just CSS and HTML
In CSS the pseudo class :active is applied only when you press the "click" element, as soon as you release the mouse button the status :active is removed, so you see the animation quickly and then she disappeared.
To solve this problem you had to adjust the HTML, I placed its icon inside a label with a for to a checkbox that is hidden with display:none . When you click on label you change the state of this checkbox hidden to :checked and it opens the menu with the animation, when you click on label it takes out the :checked state from the checkbox menu some. Another thing, now cloque the styles of class .icone into label only, type label {csss} .
Although I see that you need to make a lot of CSS adjustments there to be nice, the example itself is not perfect because I did not want to mess around with CSS and I changed the minimum for it to work, but you need to study more about positions , margins and paddings to use them in the most appropriate way
See the code to understand better, I commented in the code where it is for you to have more attention and to see what I have changed.
OBS: All LI must be the child of a UL or OL , so I've arranged this in your HTML, read the documentation about the Sorted and Unordered Lists here: a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/ul"> link
.nav ul {
opacity: 0;
}
.nav {
background: transparent;
height: 50px;
border: 1px solid black;
}
label {
position: absolute;
display: inline-block;
color: gray;
font-size: 1.5em;
text-align: left;
width: 60px;
}
/* agora é quando o btn está com estado :checked que a animação é aplicada */
#btn:checked~.nav ul {
animation: Menu 0.1s;
animation-fill-mode: forwards;
}
@keyFrames Menu {
80% {
text-align: right;
}
90% {
text-align: center;
}
100% {
opacity: 1;
}
}
#btn {
display: none;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<div class="header">
<!-- coloquei o ícone dentro da label, com um for = para o ID do input-checkbox abaixo -->
<label for="btn"><i class="fas fa-sliders-h icone" id="icone"></i></label>
<!-- quando esse inpute é :checked ele ativa a animação do menu -->
<input type="checkbox" name="" id="btn">
<div class="nav">
<ul>
<li class="li" id="li">
<a href="form.html" target="_black" class="link">Form
<hr>
</a>
</li>
<li class="li">
<a href="#" class="link">Contact
<hr>
</a>
</li>
<li class="li">
<a href="#" class="link">Article
<hr>
</a>
</li>
</ul>
</div>
</div>
