代码之家 › 专栏 › 技术社区 › Ancross

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

css-transitions css-animations animation css

Ancross · 技术社区 · 2 年前

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

.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

2 回复 | 直到 2 年前

imvain2 2 年前

您需要更改链接的显示属性。默认情况下,它们是内联显示的。

显示:内联

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

geekyorion 2 年前

您正在内联级元素上使用translateY,由于某些限制,该元素无法转换。要正确使用它,您可以使其成为 inline-block

用CSS写这行,就像

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

推荐文章

Ahmed Zaidan · 快速ui转换无法按预期工作

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前