如何在CSS中的菜单栏上制作动画

如何在按下div按钮时制作导航栏的幻灯片动画

我已经为它创建了java脚本函数，它通常会出现，但让它突然出现有点烦人。我希望它能显示出来，并从顶部缓慢滑动2-3秒。我试着在包含所有(导航列表(的类上使用以下代码，但没有成功：

const toggleButton = document.querySelector('.dot_a');
const navbarLinks = document.querySelector('.nav-list');
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})

body {
background-image: url(1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 0;
}
.pro_column1 {
width: 15%;
}
.pro_column2 {
width: 85%;
}
.nav {
overflow: hidden;
background-color: white;
/*opacity: 60%;*/
margin: 10px;
border-radius: 10px;
width: 850px;
/*background:#3c6382;
/*box-shadow:0px 5px 20px rgba(0,0,0,0.1);*/
/*border: solid black 2px;*/
}
.nav a {
color: #747d8c;
text-align: center;
padding: 35px 10px;
text-decoration: none;
font-size: 17px;
margin: 0;
border-radius: 10px;
transition: 1s;
}
.nav a:hover {
background-color: #ddd;
color: black;
-webkit-animation: 1s ease-in forwards;
}
.dot_a {
padding: 30px 10px;
font-size: 17px;
text-align: center;
margin: 0;
display: inline-block;
border-radius: 10px;
transition: 1s;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
i {
/*float: right;*/
font-size: 20px;
border: none;
outline: none;
color: #747d8c;
padding: 32px 5px;
font-family: inherit;
margin: 0px;
border-radius: 20px;
transition: 1s;
}
.dot {
height: 15px;
width: 15px;
border-radius: 50%;
display: inline-block;
margin: 0px;
}
.column {
float: left;
width: 33.33%;
padding: 10px;
height: 300px;
}
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 870px) {
.nav a {
padding-top: 5px;
padding-bottom: 5px;
display: block;
}
.dot_a {
padding-top: 3px;
padding-bottom: 0px;
}
.nav {
width: 90%;
}
.dot {
margin-top: 15px;
margin-bottom: 15px;
}
.nav-list {
display: none;
transform: translateX(100%);
transition: transform 1s ease-in;
}
.nav-list.active {
display: block;
margin: 0;
padding: 0;
transform: translateX(0%);
}
}

<script src="https://kit.fontawesome.com/d2896764d5.js" crossorigin="anonymous"></script>
<center>
<nav class="nav">
<div class="dot_a">
<span class="dot" style="background-color: transparent; width: 5px; height: 5px;"></span>
<span class="dot" style="background-color: #ff4757;"></span>
<span class="dot" style="background-color: #ffa502"></span>
<span class="dot" style="background-color: #2ed573;"></span>
</div>
<span class="nav-list">
<a class="anchors" href="Index.html"><i class="fas fa-house-damage"></i>&nbsp;&nbsp;НАЧАЛО</a>
<a class="anchors" href="HtmlPage.html"><i class="fas fa-code"></i>&nbsp;&nbsp;HTML&CSS</a>
<a class="anchors" href="#"><i class="fas fa-tools"></i>&nbsp;&nbsp;ИНСТРУМЕНТИ</a>
<a class="anchors" href="#"><i class="fas fa-thumbtack"></i>&nbsp;&nbsp;ЗАДАЧИ</a>
<a class="anchors" href="#"><i class="far fa-address-card "></i>&nbsp;&nbsp;ЗА НАС</a> 
</span>
</nav>
</center>