在导航的下拉菜单中包含动画

Question

我想实现动画时，下拉菜单被触发一旦点击汉堡包图标(只出现在手机和平板电脑)。到目前为止，它只在点击时出现和消失，但我希望它有一个掉落动画。如果可能的话，避免使用js而只使用css的最好方法是什么?

body {
background-color: #111111 !important;
font-family: 'Fredoka', sans-serif;
}

a {
color: #dad7d7;
text-decoration: none;
transition: 0.3s;
}
.botoncopyright,
.botoncopyright:hover {
color: #ccd1d1;
}
footer {
background-color: #232323;
}

.cookie-container {
background-color: #232323;
color: #dad7d7;
}
.cookie-container a {
color: #dad7d7;
}
.cookie-container a:hover {
color: #ffffff;
}

html {
scroll-behavior: smooth;
}

main {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
gap: 2vw;
}

a {
color: #dad7d7;
text-decoration: none;
transition: 0.3s;
}

nav {
z-index: 1;
background-color: rgba(35, 35, 35, 0.9);
backdrop-filter: saturate(180%) blur(20px);
padding: 0 15px;
position: sticky;
top: 0;
}

.botoncopyright,
.botoncopyright:hover {
color: #ccd1d1;
text-decoration: none;
cursor: default;
}

footer {
background-color: #232323;
}

.cookie-container {
position: fixed;
top: auto;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
background-color: #363636;
color: #dad7d7;
text-align: center;
padding: 10px 32px;
transform: translateY(100%);
transition: transform 400ms ease-in-out;
}

.cookie-container.active {
transform: translateY(0);
}

.cookie-container p {
padding-top: 10px;
}

.cookie-container a {
text-decoration: none !important;
color: #dad7d7;
display: flex;
justify-content: center;
align-items: center;
}

.cookie-container a:hover {
color: #ffffff;
}

.cookie-btn {
background-color: #add8e6;
border: none;
margin-top: 20px;
width: 28%;
color: #232323 !important;
transition: 0.3s;
cursor: pointer;
border-radius: 4px 4px 4px 4px;
margin-bottom: 10px;
}

.cookie-btn:hover {
background-color: #a6daeb;
width: 30%;
transition: 0.3s;
}

footer .btn svg {
transition: 0.3s;
}

.rsyoutube {
fill: #8b8d90;
}

.rsyoutube:hover {
fill: #ff0000;
}

.rstwitter {
fill: #8b8d90;
}

.rstwitter:hover {
fill: #00acee;
}

.rsinstagram {
fill: #8b8d90;
}

.rsinstagram:hover {
fill: #de1b85;
}

.rstelegram {
fill: #8b8d90;
}

.rstelegram:hover {
fill: #229ed9;
}

.rsdiscord {
fill: #8b8d90;
}

.rsdiscord:hover {
fill: #5865f2;
}

df-messenger {
--df-messenger-bot-message: #e1f2f7;
--df-messenger-button-titlebar-color: #add8e6;
--df-messenger-button-titlebar-font-color: #757575;
--df-messenger-chat-background-color: #232323;
--df-messenger-font-color: #232323;
--df-messenger-send-icon: #add8e6;
--df-messenger-user-message: #add8e6;
}

df-messenger:hover {
--df-messenger-button-titlebar-color: #a6daeb;
}

.content {
margin: auto;
max-width: 2200px;
width: 96vw;
}

.contact-wrapper {
background: transparent;
width: 100%;
height: auto;
}

.contact-wrapper h1,
.contact-wrapper h2 {
margin: 1.8em 0 47px 0;
font-weight: 400;
text-transform: uppercase;
color: #d2d2d2;
letter-spacing: 0.2em;
}

.contact-wrapper h1 {
font-size: 20px;
text-align: center;
}

.contact-wrapper h2 {
font-size: 18px;
text-align: left;
}

.contact-wrapper p {
color: #d2d2d2;
text-align: justify;
}

.contact-wrapper > * {
padding: 1em;
}

.contact-form {
background: linear-gradient(225deg, transparent 30px, #212121 0) top left;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100%;
height: auto;
}

.contact-form h2 {
margin: 10px 0 30px 0;
font-size: 18px;
padding-top: 2.5em;
text-align: center;
font-weight: 400;
text-transform: uppercase;
color: #d2d2d2;
letter-spacing: 0.2em;
}

.contact-form form p{
color: #d2d2d2;
margin: 0;
text-align: center;
padding: 1em;
}

.contact-form form button,
.contact-form form input,
.contact-form form textarea {
width: 90%;
padding: 0.7em;
border: none;
background: none;
outline: none;
resize: none;
color: #d2d2d2;
border-bottom: 1px solid #add8e6;
}

.contact-form form button {
padding: none;
width: 53%;
background: #add8e6;
border: 0;
transition: 0.1s;
border-radius: 8px;
color: #3b3b3b;
}

.contact-form form button:hover,
.contact-form form button:focus {
background: #a6daeb;
padding: none;
width: 57%;
border: 0;
transition: 0.1s;
border-radius: 8px;
color: #3b3b3b;
}

.contact-info {
background: linear-gradient(-315deg, transparent 30px, #a7d1de 0) bottom left;
background-size: 100% 100%;
background-repeat: no-repeat;
height: auto;
}

.contact-info h3 {
margin: 0 0 37px 38px;
font-size: 14px;
padding-top: 2em;
text-align: center;
padding-right: 27px;
font-weight: 400;
text-transform: uppercase;
color: #232323;
letter-spacing: 0.2em;
}

#clients .client-logo {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border: none;
overflow: hidden;
background: none;
height: 120px;
}

#clients img {
transition: all 0.4s ease-in-out;
}

.contact-info p {
text-align: center;
margin: 1.5rem 0 1rem 0;
color: #696969;
}

.btn:focus {
outline: none !important;
box-shadow: none !important;
}

.toggle a {
color: #dad7d7;
}

.toggle a:hover {
color: #ffffff;
}

.menu,
.submenu {
list-style-type: none;
}

.logo {
padding: 7.5px 0 7.5px 0;
}

.botonlogo {
max-width: 56px;
}

.item {
padding: 10px;
}

.item.button {
padding: 9px 5px;
}

.item:not(.button) a:hover,
.item a:hover::after {
color: #ffffff;
transition: 0.3s;
}

.menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
}

.menu li a {
display: block;
padding: 15px 5px;
}

.menu li.subitem a {
padding-right: -15px;
padding-left: 15px;
padding-top: 35px;
width: 100%;
}

.toggle {
order: 1;
font-size: 20px;
}

.item.button {
order: 2;
}

.item {
order: 3;
width: 100%;
text-align: center;
display: none;
}

.active .item {
display: block;
}

.button.secondary {
border-bottom: 1px solid #dad7d7;
}

.submenu {
display: none;
}

.submenu-active .submenu {
display: block;
}

.has-submenu>a::after {
font-family: 'Font Awesome 5 Free';
font-size: 16px;
line-height: 16px;
content: 'f024';
color: #dad7d7;
padding-left: 11px;
}

.subitem a {
padding: 10px 15px;
}

.submenu-active {
border-radius: 0;
background-color: #363636;
width: 100%;
border-radius: 5px 5px 0px 0px;
}

li.has-submenu a {
color: #dad7d7 !important;
transition: 0.3s;
padding-bottom: 12px;
cursor: pointer;
}

li.has-submenu a:hover {
color: #ffffff !important;
transition: 0.3s;
cursor: pointer;
}

li.subitem a {
padding-left: 0%;
padding-right: 53px !important;
width: 100%;
}

/* Mediaqueries tablet */

@media all and (min-width: 700px) {
.cookie-btn {
background-color: #add8e6;
border: none;
margin-top: 20px;
width: 13%;
color: #232323 !important;
transition: 0.3s;
cursor: pointer;
border-radius: 4px 4px 4px 4px;
margin-bottom: 10px;
}

.cookie-btn:hover {
background-color: #a6daeb;
width: 18%;
transition: 0.3s;
}

.content {
margin-left: auto;
margin-right: auto;
max-width: 2200px;
width: 96vw;
}

.contact-wrapper {
background: transparent;
width: 100%;
height: auto;
}

.contact-wrapper h1,
.contact-wrapper h2 {
margin: 1.8em 0 47px 0;
font-weight: 400;
text-transform: uppercase;
color: #d2d2d2;
letter-spacing: 0.2em;
}

.contact-wrapper h1 {
font-size: 20px;
text-align: center;
}

.contact-wrapper h2 {
font-size: 18px;
text-align: left;
}

.contact-wrapper p {
color: #d2d2d2;
text-align: justify;
}

.contact-wrapper > * {
padding: 1em;
}

.contact-form {
background: linear-gradient(225deg, transparent 30px, #212121 0) top left;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100%;
height: auto;
}

.contact-form h2 {
margin: 10px 0 30px 0;
font-size: 18px;
padding-top: 2.5em;
text-align: center;
font-weight: 400;
text-transform: uppercase;
color: #d2d2d2;
letter-spacing: 0.2em;
}

.contact-form form p{
color: #d2d2d2;
margin: 0;
text-align: center;
padding: 1em;
padding-top: 7.1%;
}

.contact-form form button,
.contact-form form input,
.contact-form form textarea {
width: 90%;
padding: 0.7em;
border: none;
background: none;
outline: none;
resize: none;
color: #d2d2d2;
border-bottom: 1px solid #add8e6;
}

.contact-form form button {
padding: none;
width: 34%;
background: #add8e6;
border: 0;
transition: 0.1s;
border-radius: 8px;
color: #3b3b3b;
}

.contact-form form button:hover,
.contact-form form button:focus {
background: #a6daeb;
padding: none;
width: 38%;
border: 0;
transition: 0.1s;
border-radius: 8px;
color: #3b3b3b;
}

.contact-info {
background: linear-gradient(-315deg, transparent 30px, #a7d1de 0) bottom left;
background-size: 100% 100%;
background-repeat: no-repeat;
height: auto;
}

.contact-info h3 {
margin: 0 0 37px 38px;
font-size: 14px;
padding-top: 5em;
text-align: center;
padding-right: 27px;
font-weight: 400;
text-transform: uppercase;
color: #232323;
letter-spacing: 0.2em;
}

#clients .client-logo {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border: none;
overflow: hidden;
background: none;
height: 120px;
}

#clients img {
transition: all 0.4s ease-in-out;
}

.contact-info p {
text-align: center;
margin: 5rem 0 1rem 0;
width: 90%;
margin-right: auto;
margin-left: auto;
color: #696969;
}

.btn:focus {
outline: none !important;
box-shadow: none !important;
}

.menu {
justify-content: center;
width: 100%;
}
.logo {
flex: 1;
}
.item.button {
width: auto;
order: 1;
display: block;
}
.toggle {
flex: 1;
text-align: right;
order: 2;
}
.menu li.button a {
padding: 10px 15px;
margin: 5px 0;
}
.button a {
background-color: #add8e6;
color: #232323;
border: 1.5px solid #add8e6;
border-radius: 4px 4px 4px 4px;
transition: 0.8s;
}
.button.secondary {
border: 0;
}
.button.secondary a {
background-color: #add8e6;
border: 1.5px solid #add8e6;
transition: 0.8s;
}
.button a:hover {
background-color: #a6daeb;
text-decoration: none;
color: #474747;
transition: 0.8s;
}
.button:not(.secondary) a:hover {
border: 1.5px solid #a6daeb;
transition: 0.8s;
}
}

/* Mediaqueries desktop */

@media all and (min-width: 960px) {
.cookie-btn {
background-color: #add8e6;
border: none;
margin-top: 20px;
width: 10%;
color: #232323 !important;
transition: 0.3s;
cursor: pointer;
border-radius: 4px 4px 4px 4px;
margin-bottom: 10px;
}

.cookie-btn:hover {
background-color: #a6daeb;
width: 11%;
transition: 0.3s;
}

.content {
margin: auto;
margin-left: auto;
margin-right: auto;
max-width: 2200px;
width: 96vw;
}

.contact-wrapper {
background: transparent;
width: 100%;
height: auto;
display: grid;
grid-template-columns: 2fr 1fr;
}

.contact-wrapper h1,
.contact-wrapper h2 {
margin: 1.8em 0 47px 0;
font-weight: 400;
text-transform: uppercase;
color: #d2d2d2;
letter-spacing: 0.2em;
}

.contact-wrapper h1 {
font-size: 20px;
text-align: center;
}

.contact-wrapper h2 {
font-size: 18px;
text-align: left;
}

.contact-wrapper p {
color: #d2d2d2;
text-align: justify;
padding-top: 10%;
}

.contact-wrapper > * {
padding: 1em;
}

.contact-form {
background: linear-gradient(-315deg, transparent 45px, #212121 0) bottom left;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100%;
height: auto;
}

.contact-form h2 {
margin: 10px 0 30px 0;
font-size: 18px;
padding-top: 2.5em;
text-align: center;
font-weight: 400;
text-transform: uppercase;
color: #d2d2d2;
letter-spacing: 0.2em;
}

.contact-form form p{
color: #d2d2d2;
margin: 0;
text-align: center;
padding: 1em;
padding-top: 7%;
}

.contact-form form button,
.contact-form form input,
.contact-form form textarea {
width: 90%;
padding: 0.7em;
border: none;
background: none;
outline: none;
resize: none;
color: #d2d2d2;
border-bottom: 1px solid #add8e6;
}

.contact-form form button {
padding: none;
width: 40%;
background: #add8e6;
border: 0;
transition: 0.2s;
border-radius: 8px;
color: #3b3b3b;
margin-bottom: 6%;
}

.contact-form form button:hover,
.contact-form form button:focus {
background: #a6daeb;
padding: none;
width: 44%;
border: 0;
transition: 0.2s;
border-radius: 8px;
color: #3b3b3b;
}

.contact-info {
background: linear-gradient(225deg, transparent 45px, #a7d1de 0) top left;
background-size: 100% 100%;
background-repeat: no-repeat;
height: auto;
}

.contact-info h3 {
margin: 0 0 37px 38px;
font-size: 14px;
padding-top: 25%;
text-align: center;
padding-right: 27px;
font-weight: 400;
text-transform: uppercase;
color: #232323;
letter-spacing: 0.2em;
}

#clients .client-logo {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border: none;
overflow: hidden;
background: none;
height: 120px;
}

#clients img {
transition: all 0.4s ease-in-out;
}

.contact-info p {
text-align: center;
margin: 2rem 0 1rem 0;
width: 86%;
margin-right: auto;
margin-left: auto;
color: #696969;
}

.item {
order: 1;
position: relative;
display: block;
width: auto;
}

.button {
order: 2;
}

.submenu-active .submenu {
display: block;
position: absolute;
left: 0;
top: 68px;
background-color: #363636;
border-radius: 0px 0px 5px 5px;
}

.toggle {
display: none;
}
.boton {
background-color: #add8e6;
border: none;
color: #585858 !important;
}
.boton:hover {
background-color: #a6daeb;
border: none;
color: #585858 !important;
}

}

<!DOCTYPE html>
<html lang="es">
<head>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width-device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="img/favicon.ico" /><title>Mixi</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>
<df-messenger chat-title="Mixi" agent-id="41fe496c-6e3a-4316-aa5a-05dae8cd911d" language-code="es"></df-messenger>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-229317979-1"></script>
<script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-229317979-1');</script>
<script src="https://kit.fontawesome.com/d48f664aec.js" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
<link rel="preload" href="css/index.css" as="style">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300&display=swap" rel="stylesheet">
</head>
<body>

<nav>
<ul class="menu">
<li class="logo"><a class="botonlogo" href="https://www.mixi.es"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"width="50px" height="50px" viewBox="0 0 99 99" enable-background="new 0 0 99 99" xml:space="preserve"><path fill="#ACD7E4" d="M85.95,98.88H12.37c-6.78,0-12.28-5.5-12.28-12.28V13.02c0-6.78,5.5-12.28,12.28-12.28h73.58c6.78,0,12.28,5.5,12.28,12.28V86.6C98.23,93.38,92.73,98.88,85.95,98.88z"/><g><g><g><path fill="#1D1D1B" d="M7.96,66.3c-0.68,0-1.17-0.11-1.49-0.32s-0.53-0.5-0.64-0.85c-0.11-0.35-0.16-0.78-0.16-1.28v-21.1c0-0.46,0.05-0.86,0.16-1.2c0.11-0.34,0.33-0.59,0.67-0.77s0.84-0.27,1.52-0.27c0.78,0,1.34,0.15,1.68,0.45c0.34,0.3,0.51,0.83,0.51,1.57l-0.21,2.29c0.25-0.53,0.62-1.07,1.12-1.6c0.5-0.53,1.09-1.01,1.79-1.44c0.69-0.43,1.43-0.76,2.21-1.01c0.78-0.25,1.58-0.37,2.4-0.37c1.24,0,2.35,0.22,3.33,0.67c0.98,0.44,1.86,1.07,2.64,1.89c0.78,0.82,1.44,1.83,1.97,3.04c0.71-1.17,1.46-2.17,2.26-3.01c0.8-0.83,1.71-1.47,2.72-1.92c1.01-0.44,2.16-0.67,3.44-0.67c2.06,0,3.77,0.51,5.14,1.52c1.37,1.01,2.4,2.43,3.09,4.26c0.69,1.83,1.04,4.02,1.04,6.58v11.13c0,0.5-0.05,0.92-0.16,1.28c-0.11,0.36-0.32,0.63-0.64,0.83s-0.83,0.29-1.54,0.29c-0.67,0-1.19-0.11-1.54-0.32c-0.36-0.21-0.58-0.5-0.67-0.85c-0.09-0.35-0.13-0.78-0.13-1.28V52.72c0-1.56-0.2-2.93-0.59-4.1c-0.39-1.17-0.96-2.08-1.71-2.72c-0.75-0.64-1.72-0.96-2.93-0.96c-1.28,0-2.41,0.32-3.38,0.96c-0.98,0.64-1.73,1.54-2.26,2.69s-0.8,2.53-0.8,4.13v11.24c0,0.53-0.11,1-0.32,1.39c-0.21,0.39-0.53,0.67-0.96,0.83c-0.43,0.16-0.96,0.19-1.6,0.08c-0.53-0.04-0.94-0.17-1.23-0.4s-0.46-0.51-0.53-0.85c-0.07-0.34-0.11-0.72-0.11-1.15V52.72c0-1.56-0.19-2.93-0.56-4.1s-0.94-2.08-1.71-2.72c-0.76-0.64-1.75-0.96-2.96-0.96c-1.28,0-2.41,0.33-3.38,0.99c-0.98,0.66-1.73,1.57-2.26,2.74c-0.53,1.17-0.8,2.52-0.8,4.05v11.19c0,0.5-0.05,0.92-0.16,1.28c-0.11,0.36-0.33,0.63-0.67,0.83C9.2,66.2,8.67,66.3,7.96,66.3z"/><path fill="#1D1D1B" d="M52.23,34.12c-0.78,0-1.37-0.12-1.76-0.35c-0.39-0.23-0.65-0.56-0.77-0.99c-0.12-0.43-0.19-0.92-0.19-1.49c0-0.57,0.06-1.06,0.19-1.46c0.12-0.41,0.39-0.71,0.8-0.91c0.41-0.2,1-0.29,1.78-0.29c0.75,0,1.31,0.11,1.71,0.32s0.65,0.53,0.77,0.96c0.12,0.43,0.19,0.94,0.19,1.54c0,0.53-0.06,1-0.19,1.41c-0.12,0.41-0.38,0.72-0.77,0.93C53.6,34.02,53.01,34.12,52.23,34.12z M52.23,66.3c-0.67,0-1.19-0.1-1.54-0.29c-0.36-0.2-0.58-0.47-0.67-0.83c-0.09-0.35-0.13-0.78-0.13-1.28V42.86c0-0.46,0.05-0.88,0.16-1.25s0.33-0.65,0.67-0.83c0.34-0.18,0.86-0.27,1.57-0.27c0.67,0,1.17,0.1,1.49,0.29c0.32,0.2,0.53,0.48,0.64,0.85c0.11,0.37,0.16,0.81,0.16,1.3v20.99c0,0.5-0.05,0.92-0.16,1.28c-0.11,0.36-0.33,0.62-0.67,0.8C53.42,66.21,52.91,66.3,52.23,66.3z"/></g></g><g><path fill="#1D1D1B" d="M65.03,57.61l-4.59,5c-0.52,0.57-0.88,1.05-1.08,1.43c-0.2,0.39-0.2,0.75,0,1.09c0.2,0.34,0.56,0.7,1.08,1.09c0.52,0.35,0.97,0.59,1.35,0.72c0.38,0.12,0.77,0.08,1.17-0.13c0.4-0.21,0.86-0.58,1.38-1.12l7.42-8.08H65.03z"/><path fill="#1D1D1B" d="M84.36,64.04c-0.18-0.39-0.55-0.87-1.11-1.43l-8.04-8.76l8.1-8.83c0.56-0.57,0.92-1.05,1.08-1.43c0.16-0.39,0.14-0.75-0.06-1.09c-0.2-0.34-0.58-0.72-1.14-1.14c-0.76-0.57-1.38-0.81-1.86-0.72c-0.48,0.09-1.12,0.52-1.92,1.3l-7.56,8.24l-7.56-8.24c-0.48-0.53-0.9-0.9-1.26-1.12c-0.36-0.21-0.73-0.27-1.11-0.16c-0.38,0.11-0.83,0.34-1.35,0.69c-0.6,0.39-1,0.75-1.2,1.09c-0.2,0.34-0.21,0.71-0.03,1.12c0.18,0.41,0.53,0.89,1.05,1.46l8.1,8.83l-0.01,0.01l3.37,3.67l0.01-0.01l7.5,8.18c0.56,0.53,1.04,0.9,1.44,1.12c0.4,0.21,0.79,0.26,1.17,0.13c0.38-0.12,0.81-0.36,1.29-0.72c0.56-0.39,0.93-0.75,1.11-1.09C84.54,64.79,84.54,64.43,84.36,64.04z"/></g><g><g><path fill="#1D1D1B" d="M90.03,34.55c-0.78,0-1.37-0.11-1.76-0.35c-0.39-0.23-0.65-0.56-0.77-0.99c-0.12-0.43-0.19-0.92-0.19-1.49c0-0.57,0.06-1.06,0.19-1.47c0.12-0.41,0.39-0.71,0.8-0.91c0.41-0.19,1-0.29,1.79-0.29c0.75,0,1.31,0.11,1.7,0.32c0.39,0.21,0.65,0.53,0.77,0.96s0.19,0.94,0.19,1.54c0,0.53-0.06,1-0.19,1.41c-0.12,0.41-0.38,0.72-0.77,0.93C91.4,34.44,90.81,34.55,90.03,34.55z M90.03,66.72c-0.67,0-1.19-0.1-1.54-0.29c-0.36-0.2-0.58-0.47-0.67-0.83c-0.09-0.35-0.13-0.78-0.13-1.28V43.28c0-0.46,0.05-0.88,0.16-1.25c0.11-0.37,0.33-0.65,0.67-0.83s0.86-0.27,1.57-0.27c0.67,0,1.17,0.1,1.49,0.29c0.32,0.2,0.53,0.48,0.64,0.85s0.16,0.81,0.16,1.31v20.99c0,0.5-0.05,0.92-0.16,1.28c-0.11,0.36-0.33,0.62-0.67,0.8C91.21,66.63,90.71,66.72,90.03,66.72z"/></g></g></g></svg></a></li>
<li class="item"><a href="tienda">Tienda</a></li>
<li class="item"><a href="calculadora">Calculadora</a></li>

<li class="item"><a href="noticias">Noticias</a></li>
<li class="item"><a href="contacto">Contacto</a></li>
<li class="item has-submenu">
<a tabindex="0">Idioma: ES</a>
<ul class="submenu">
<li class="subitem"><a href="https://www.mixi.es/en">English</a></li>
</ul>
</li>
<li class="toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
<script src="js/toggle.js"></script>
</ul>
</nav>
<br>
<br>
<br>
<br>
<br>
<br>
<script src="js/utilidades.js"></script>
<footer class="text-center text-white">
<div class="text-center text-dark p-3" style="background-color: rgba(0, 0, 0, 0.2);"> 
<a class="botoncopyright">Mixi &copy; | 2022</a>
</div>
</footer>
<script src="js/toggle.js"></script>

</body>
</html>

Answer 1

您是否尝试过为导航添加过渡?如果没有，请尝试

Nav{transition:easy-in-out all 0.5s}