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状态和某些元素的过渡。

value.var

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

Answer 2

对于这种简单的操作，您实际上不需要使用@keyframes。我认为transition是您最好的选择。下面，我仅使用transition的{{1}}上的:hover属性为您创建了一个示例。

您只需将.el-item的默认属性设置为不处于悬停状态时的样子，然后在添加.texte-a-hover时这些属性将覆盖您的默认属性将鼠标悬停在您选择的项目上。

这是一个简单的例子：

:hover

.el-item {
  width: 50vw;
  height: 100vh;
  background: turquoise;
  position: relative;
}

.texte-a-hover {
  transition: 0.35s;
  position: absolute;
  top: -100%;
  opacity: 0;
}

.el-item:hover .texte-a-hover {
  top: 0;
  opacity: 1;
}

根据所需的样式，您可以调整覆盖图的样式。这是样式更多的版本：

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

.el-item {
  width: 50vw;
  height: 80vh;
  background: url(https://picsum.photos/200/300) center/cover no-repeat;
  position: relative;
}

.texte-a-hover {
  transition: opacity 1s, top 0.35s;
  padding: 5px 10px;
  margin: 0;
  position: absolute;
  top: -120%;
  height: calc(100% - 10px);
  width: calc(100% - 20px);
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(255, 255, 255, .3);
}

.el-item:hover .texte-a-hover {
  top: 0;
  opacity: 1;
}

Answer 3

您好，欢迎来到StackOverflow。对于动画悬停效果，最好使用transitions而不是animations。这是您尝试使用过渡来完成的效果，例如：

.texte-a-hover {
  transition:all 0.5s ease;
}
.texte-a-hover:hover {
  transform:translateY(-30px); // example property change
  height:auto;
}

在上面的示例中，您只需添加transition属性并根据需要进行设置（在这种情况下，对所有属性应用过渡，持续 0.5秒< / strong>和 ease 轻松），然后只需在hover上更改您的媒体资源即可。

我的动画（悬停了）不起作用，我也不明白为什么

3 个答案: