Why won't my small CSS Animation trigger?

Other code that might be blocking the animation:

.projectLinks a{
  background-color: var(--secondary-color);
  color: var(--main-color);
  padding: 2px 4px 4px 4px;
  border-radius: 15px;
  margin-right: 25px;
  text-decoration: none;

Animation

  transition-property: transform;
  transition-duration: .3s;
}

.projectLinks a:hover{
  background-color: var(--secondary-hover);
  transform: translateY(-3px);
}

The hover color is applied but there is no transition. Why is that?

Here is a link to a codepen recreation of what I have:

https://codepen.io/Ancross/pen/yLKabeM

>Solution :

You will want to change the display property of the links. By default they are display inline.

To keep a similar look, I used display:inline

.projectLinks a{
  background-color: rgb(0, 153, 255);
  color: white;
  padding: 2px 4px 4px 4px;
  border-radius: 15px;
  margin-right: 25px;
  text-decoration: none;
  transition-property: transform;
  transition-duration: .3s;
  display:inline-block;
}

.projectLinks a:hover{
  background-color: rgb(1, 137, 228);
  transform: translateY(-3px);
}

<div class='projectLinks'>
  <a>Text</a>
</div>