css - 我的动画(悬停)不工作，我不明白为什么

Question

我实际上正在为一个网站开发 Wordpress。我希望我的网格在悬停图像时显示描述，但文本淡出的动画不起作用，我不明白为什么。

我是 CSS 的新手，所以这可能是一个基本错误，在互联网上我看到我们应该在没有结束的情况下将动画放在同一个元素上，我试过没有“.text-a-hover”(总是在 .el-item 中)并尝试将其直接放在 .texte-a-hover 中，但均无效

.texte-a-hover {
  border: 2px;
  visibility: hidden;
  height: 0;
}

.el-item .texte-a-hover {
  animation: out 0.5s;
}

.el-item:hover .texte-a-hover {
  visibility: visible;
  animation: in 0.5s;
  height: 100%;
  padding: 5px;
}

@keyframes in {
  0% {
    transform: translateY(-30px);
    opacity: 0;
    height: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
    height: 100%;
  }
}

@keyframes out {
  0% {
    opacity: 1;
    height: 100%;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(-30px);
    opacity: 0;
    height: 0;
  }
}

<p class="texte-a-hover"> text </p>

.el-item就是整组，图片+文字

所以我希望文本像淡入一样淡出

感谢您对我的关注和以后的帮助

Answer 1

关键帧在这里似乎有点矫枉过正。您可以只使用 :hover 状态和元素的一些转换。

.texte-a-hover {
  border: 2px;
  opacity: 0;
  height: 0;
  transition: opacity .5s, height .5s;
}

.el-item:hover .texte-a-hover {
  visibility: visible;
  opacity: 1;
  height: 100%;
}

<div class="el-item">XXX
  <p class="texte-a-hover"> text </p>
</div>