Link grow font on hover

Question

I have a list of links and when hovering them, I want the font grow smoothly.

Currently the font grows instant, even when using transition.

#menuHeader {
  font-weight: bold;
}

.link {
  text-decoration: none;
}

.menuItem {
  list-style-type: none;
  margin-bottom: 10px;
}

.menuLink {
  transition-property: font-size;
  transition-property: color;
  transition-duration: 0.3s;
  font-size: 16px;
  color: #000000;
}

.menuLink:hover {
  transition-property: font-size;
  transition-property: color;
  transition-duration: 0.3s;
  font-size: 20px;
  color: #97d700;
}

<ul>
  <li class="menuItem" id="menuHeader">Title</li>
  <li class="menuItem"><a class="link menuLink" href="/">Link 1</a></li>
  <li class="menuItem"><a class="link menuLink" href="/">Link 2</a></li>
  <li class="menuItem"><a class="link menuLink" href="/">Link 3</a></li>
</ul>

This is an example page

https://www.roidna.com/services/

The links attached in the blocks grow their size when hovering over them.

Answer 1

You have some overriding going on. You need to declare them on one line:

transition: color 0.5s, font-size 0.5s;

#menuHeader {
  font-weight: bold;
}

.link {
  text-decoration: none;
}

.menuItem {
  list-style-type: none;
  margin-bottom: 10px;
}

.menuLink {
  -webkit-transition: color 0.5s, font-size 0.5s;
  transition: color 0.5s, font-size 0.5s;
  font-size: 16px;
  color: #000000;
}

.menuLink:hover {
  font-size: 20px;
  color: #97d700;
}

<ul>
  <li class="menuItem" id="menuHeader">Title</li>
  <li class="menuItem"><a class="link menuLink" href="/">Link 1</a></li>
  <li class="menuItem"><a class="link menuLink" href="/">Link 2</a></li>
  <li class="menuItem"><a class="link menuLink" href="/">Link 3</a></li>
</ul>

Answer 2

.menuLink {
  font-size: 16px;
  color: #000000;

    -webkit-transition: color 0.3s, font-size 0.3s;
       -moz-transition: color 0.3s, font-size 0.3s;
         -o-transition: color 0.3s, font-size 0.3s;
            transition: color 0.3s, font-size 0.3s;
}

.menuLink:hover {
  font-size: 20px;
  color: #97d700;
}

Maybe this could help you