how to only give animation to one element in Navbar rest of them no animation using css

where i have a para called SHOP it will move from left to right as a animation but with that every element like** HOME,PRODUCTS,ABOUT,CONTACT **everything is moving right to left i want to stop them moving except SHOP HTML CODE

* {
  margin: 0;
}

.navbar {
  font-family: monospace;
  font-size: 1.3rem;
  padding: 1%;
  background-color: rgb(235, 178, 178);
}

.navbar a {
  margin-left: 1.5%;
  text-decoration: none;
  color: black;
  padding: 0.6%;
}

.navbar a:not(.name):hover {
  animation: none; /* Disable animation for all links except the "HASGU" element */
}


.searchbar {
  margin-left: 600px;
  padding: 10px;
  text-align: left;
  width: 500px;
  height: 10%;
  color: #fff;
  font-size: 17px;
  border: black;
  font-weight: 500;
  background: black;
  border-radius: 10px;
}

.navbar button {
  height: 10%;
  border-radius: 10px;
  padding: 10px;
  color: white;
  font-size: 17px;
  background: black;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.name {
  margin-top: 2px;
  margin-bottom: 0px;
  display: inline-block;
  font-size: 1.2em;
  color: black;
  background-color: rgb(235, 178, 178);
  padding: 0px;
  letter-spacing: 1px;
  font-family: monospace;
  border-right: 5px solid;
  width: 73px;
  white-space: nowrap;
  overflow: hidden;
  animation: typing 2s steps(5), cursor 0.4s step-end infinite alternate;
}

@keyframes cursor {
  50% {
    border-color: transparent;
  }
}

@keyframes typing {
  from {
    width: 0;
  }
}

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css" />
    <title>Hasgu</title>

    <script
      src="https://kit.fontawesome.com/e5e83f9d84.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <nav class="navbar">
      <a href="#"><p class="name">SHOP</p></a>
      <a href="">Home</a>
      <a href="">Products</a>
      <a href="">About</a>
      <a href="">Contact</a>
      <input type="search" class="searchbar" placeholder="Search" required />
      <button type="submit" class="fas fa-search"></button>
    </nav>
  </body>

Someone please help me with this thanks in advance

Please help me through that

Solution

You can use wrapper for your .name element:

* {
  margin: 0;
}

.navbar {
  font-family: monospace;
  font-size: 1.3rem;
  padding: 1%;
  background-color: rgb(235, 178, 178);
}

.navbar a {
  margin-left: 1.5%;
  text-decoration: none;
  color: black;
  padding: 0.6%;
}

.navbar a:not(.name):hover {
  animation: none; /* Disable animation for all links except the "HASGU" element */
}


.searchbar {
  margin-left: 600px;
  padding: 10px;
  text-align: left;
  width: 500px;
  height: 10%;
  color: #fff;
  font-size: 17px;
  border: black;
  font-weight: 500;
  background: black;
  border-radius: 10px;
}

.navbar button {
  height: 10%;
  border-radius: 10px;
  padding: 10px;
  color: white;
  font-size: 17px;
  background: black;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.name {
  margin-top: 2px;
  margin-bottom: 0px;
  display: inline-block;
  font-size: 1.2em;
  color: black;
  background-color: rgb(235, 178, 178);
  padding: 0px;
  letter-spacing: 1px;
  font-family: monospace;
  border-right: 5px solid;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  animation: typing 2s steps(5), cursor 0.4s step-end infinite alternate;
}

.wrapper {
  display: inline-block;
  width: 73px;
}

@keyframes cursor {
  50% {
    border-color: transparent;
  }
}

@keyframes typing {
  from {
    width: 0;
  }
}

<nav class="navbar">
  <div class="wrapper">
      <a href="#"><p class="name">SHOP</p></a>
  </div>
  <a href="">Home</a>
  <a href="">Products</a>
  <a href="">About</a>
  <a href="">Contact</a>
  <input type="search" class="searchbar" placeholder="Search" required />
  <button type="submit" class="fas fa-search"></button>
</nav>