如何在 CSS 元素中添加过渡？答案

【问题标题】：How to add transition in a CSS element?如何在 CSS 元素中添加过渡？
【发布时间】：2016-10-27 11:37:34
【问题描述】：

所以基本上当我将鼠标悬停在一个元素上时，我在一个元素上添加了一张图片，这是可行的，但随后我添加了：

过渡：0.2s；

而且它没有过渡，这是为什么呢？我希望它能够轻松融入画面，而不仅仅是立即出现。

我们将不胜感激。

如果有任何帮助，我使用了 content: url("image location");添加图像。

【问题讨论】：

试试transition: all 0.2s;。
Is possible use fade transition on tag 'content' only with css?的可能重复
您需要在非悬停 css 规则中添加过渡内容。此外，您不能简单地转换以前甚至不存在的元素。您也无法转换显示属性。
你检查我的答案了吗？就 SO 提出问题而不对给出的答案提供反馈并不是 SO 的工作方式。
对不起@connexo，从那以后我就没有活动了。我很抱歉。我最终也取消了那个项目。

标签： css css-transitions transition

【解决方案1】：

如果我了解您的需求，这将是类似的：

.picturehover {
  background-color: #f0f0f0;
  position: relative;
  height: 200px;
  width: 300px;
}
.picturehover:after {
  background: transparent url(https://lorempixel.com/300/200) center center / cover no-repeat;
  content: "";
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: opacity .4s ease-in-out; 
}
.picturehover:hover:after {
  opacity: 1;
}

&lt;div class="picturehover"&gt;Some text&lt;/div&gt;

【讨论】：

我建议你不要使用z-index:1 和z-index:-1，因为如果你使用它，淡出过渡不起作用
我后来添加了z-index 行，但没有彻底检查。感谢您的提示，我已将其删除。

【解决方案2】：

我是这样的

.box{
  background:#333;
  width:100px;
  height:100px;
  transition:0.2s linear;
}
.box:hover{
  background:#ccc;
}

&lt;div class="box"&gt;&lt;/div&gt;

【讨论】：