在::before伪元素上使用CSS过渡效果

Question

.posts .img-hover:before {
  content: '';
  display: block;
  opacity: 0;
  -webkit-transition: opacity 1.2s ease;
  -moz-transition: opacity 1.2s ease;
  -ms-transition: opacity 1.2s ease;
  -o-transition: opacity 1.2s ease;
  transition: opacity 1.2s ease-out;
}
.posts .img-hover:hover:before {
  content: '';
  display: block;
  background: url("img/Texture1.png");
  width: 320px;
  /* image width */
  height: 220px;
  /* image height */
  position: absolute;
  top: 13px;
  right: 2px;
  opacity: 1;
}

<div class="posts">
  <a href="#">
    <h2 class="postname"> 
         Travel Flashback #1 </h2>
  </a>
  <a class="img-hover" href="#">
    <img width="960" height="720" src="http://.." class="img-hover" alt="" />
  </a>
</div>

我对这段代码有一个问题。如您所见，我想使用带有背景图片的伪元素::before进行过渡。

当我悬停时，过渡效果很顺畅，但当我离开鼠标时，背景图片立即消失，没有过渡效果。

您能否提供一些建议？

- Tigran Carahunge Kuchatyan

Answer 1

在悬停时，您可能只想要与转换相关的CSS，而不是伪元素的实际样式。尝试这个

.posts .img-hover:before {
    content: '';
    display: block;
    background: url("img/Texture1.png");
    width: 320px; /* image width */
    height: 220px; /* image height */
    position: absolute;
    top: 13px;
    right: 2px;
    opacity: 0;
    -webkit-transition: opacity 1.2s ease;
    -moz-transition: opacity 1.2s ease;
    -ms-transition: opacity 1.2s ease;
    -o-transition: opacity 1.2s ease;
    transition:  opacity 1.2s ease-out;
}
.posts .img-hover:hover:before{
    opacity: 1;
}

- ynter

---

我碰到了完全相反的问题（即“opacity: 1” 突然出现在一个after伪元素上，但根据“transition”淡出），尽管应用了时间函数和延迟。有任何想法为什么会这样？ - oldboy

Answer 2

对于浏览此论坛的其他人，我遇到了完全相同的问题，我试图从一个过渡焦点切换

opacity 0.35s ease-in-out

给：

all 0.35s ease-in-out

问题已解决。 我的浏览器是Chromium版本80.0.3987.162，Debian Linux 10.4。

- Kovo

Answer 3

我的问题实际上是过渡根本没有起作用。元素会立即出现和消失。对于那些有类似问题并来到这里的人，我相信CSS会忽略空元素的悬停过渡，即使内容将在悬停时添加，而且当你悬停离开时它不会过渡的原因是因为内容会立即被删除。

与其

elem:before{
    opacity:0;
    transition: opacity 1.2s ease-out;
}

elem:hover:before {
    opacity:1;
    content:'something';
}

将内容移动到elem:before

elem:before{
    opacity:0;
    content:'something';
    transition: opacity 1.2s ease-out;
}

elem:hover:before {
    opacity:1;
}

如果您想要仅在悬停时显示内容，但希望过渡另一个属性（如宽度），并且无法使用不透明度，则应该在悬停时使用content: '';，但请记住即使在悬停结束后也要保留该属性。

回答OP的问题以及为什么ynter的解决方案有效的原因是因为背景一旦他们悬停结束就会消失。将背景保留在:before元素中。

- cyz 0