Why won't my small CSS Animation trigger?-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

You are using translateY on an inline-level element which can not be transformed due to some limitation. To use it correctly you can make it an inline-block

write this line in CSS like

.projectLinks a {
  ...
  display: inline-block;
}

this will cause this to display inline but as a block for more info about inline element and block level element please refer below MDN docs:

inline elements: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
block level element: https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements