How to slowly change the word color?

Question

I want to change the navbar words from black to slowly turn into red. I'm new to HTML and W3Schools cant help me.

 <div class="topnav navbar-expand-sm d-flex justify-content-around">
    <a href="">Category</a>
    <a class="active" href="index.html">Home</a>
    <a href="contact.html">Contact</a>
    <a href="alamat.html">Alamat Toko</a>
    <a href="pricelist.html">Pricelist</a>
    <a href="carapemesanan.html">Cara Pemesanan</a> 
    <div class="search-container" style="margin-right: 0px;">
        <form action="/action_page.php">
            <input type="text" placeholder="Search.." name="search">
            <button type="submit"><i class="fa fa-search"></i></button>
        </form>
    </div>
    <img src="images/cart.png" style="height: 40px;width: 40px;margin-top: 6px;margin-right: 10px;">
</div>

CSS:

.topnav {
  overflow: hidden;
  background-color: #e9e9e9;
  }

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: red;
  text-decoration: none;
}

.topnav a.active {
  background-color : #e9e9e9;
  color: red;
}

.topnav .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav .search-container button:hover {
  background: #ccc;
}

@media screen and (max-width: 600px) {
  .topnav .search-container {
    float: none;
  }
  .topnav a, .topnav input[type=text], .topnav .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;  
  }
}

I tried to change my code, but I can only change the background color Please help.

Thanks in advance!

Answer 1

Use transition: all 1s;

.topnav {
  overflow: hidden;
  background-color: #e9e9e9;
  }

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  transition: all 1s;
}

.topnav a:hover {
  background-color: #ddd;
  color: red;
  text-decoration: none;
}

.topnav a.active {
  background-color : #e9e9e9;
  color: red;
}

.topnav .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
}

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav .search-container button:hover {
  background: #ccc;
}

@media screen and (max-width: 600px) {
  .topnav .search-container {
    float: none;
  }
  .topnav a, .topnav input[type=text], .topnav .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;  
  }
}

<div class="topnav navbar-expand-sm d-flex justify-content-around">
    <a href="">Category</a>
    <a class="active" href="index.html">Home</a>
    <a href="contact.html">Contact</a>
    <a href="alamat.html">Alamat Toko</a>
    <a href="pricelist.html">Pricelist</a>
    <a href="carapemesanan.html">Cara Pemesanan</a> 
    <div class="search-container" style="margin-right: 0px;">
        <form action="/action_page.php">
            <input type="text" placeholder="Search.." name="search">
            <button type="submit"><i class="fa fa-search"></i></button>
        </form>
    </div>
    <img src="images/cart.png" style="height: 40px;width: 40px;margin-top: 6px;margin-right: 10px;">
</div>