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

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

css-transitions css-animations animation css

Ancross · 技术社区 · 3 年前

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

.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 回复 | 直到 3 年前

imvain2 3 年前

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

显示:内联

.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 3 年前

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

用CSS写这行,就像

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

推荐文章

lineage · docker中五彩纸屑的代码是什么/欢迎来到docker?[关闭]

1 年前

mini1012 · 关键帧css中百分比之间的延迟

1 年前

Fernandossmm · element.animate()使用关键帧似乎忽略了放松功能

2 年前

goalTosin · 当一个项目被删除时,我如何设置侧边栏项目向上滑动的动画?

2 年前

Dan · 如何设置重置变换的动画:使用CSS关键帧旋转?

2 年前

Dan · 如何使用Tailwind创建动画序列?

2 年前

Thomas Pötz · CSS伪元素的翻译速度快于主元素

2 年前

Morteza M · 在连续旋转中更改CSS动画持续时间

2 年前

Chris Dk · 为什么我的html元素在动画后会消失

2 年前

dododdo · 看到对象后在css中的动画

2 年前