为什么我的小 CSS 动画不会触发？

Question

其他可能阻塞动画的代码:

.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;

动画

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

悬停颜色已应用，但没有过渡。为什么呢?

这是我所拥有的相互依赖的重建链接:

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

Answer 1

您将需要更改链接的显示属性。默认为内联显示。

为了保持类似的外观，我使用了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>

Answer 2

你使用translateY inline-level元素不能被转换由于一些限制。正确地使用它可以让它一个inline-block

将这行写在CSS中，像

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

这将导致它显示内联，但作为一个块更多的信息关于内联元素和块级元素，请参阅下面的MDN文档:

• 内联元素:https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
• 块级元素:https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements