是否可以仅使用 css 在标签“内容”上使用淡入淡出过渡？

Question

请查看此代码 jsfiddle： http://jsfiddle.net/rflfn/6wCp6/

<div id="menu">
    <ul>
        <li><a href="#">Link #1</a></li>
        <li><a href="#">Link #2</a></li>
        <li><a href="#">Link #3</a></li>
        <li><a href="#">Link #4</a></li>
    </ul>
</div>

CSS：

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-family: arial;
    font-size: 16px;
}
a{
    color: #000000;
}
a:hover{
    color: #860000;    
}
#menu{
    margin: 15px auto;
    padding: 20px;
    width: 300px;
    background: #DDDDDD;

    border-radius: 5px;
    box-shadow: 0 0 5px #000000;
}
#menu ul{
    list-style: none;
}
#menu li:before{
    margin-right: 10px;
    content: url("http://st.deviantart.net/emoticons/s/smile.gif");

    transition: all 0.5s ease 0s;
    /* transition: content 0.5s ease 0s; */
}
#menu li:hover:before{
    content: url("http://st.deviantart.net/emoticons/r/razz.gif");
}

我在标签“li”上有一张图片，在“li:hover”上有另一张图片，是否可以仅使用 css 进行淡入淡出转换？

Answer 1

特别是您的情况

不确定您为什么要在内容中添加图片，
您可以简单地将该图像作为background-image 添加到:before，
设置它的大小和display: inline-block;，您只需像这样为background-image 设置动画：http://jsfiddle.net/7f695m1q/，因为支持背景图像转换 :)

TL;DR: content CSS 属性可以动画吗？没有。

MDN：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
过时的 w3.org 官方文档： https://www.w3.org/TR/2017/WD-css-transitions-1-20171130/#animatable-css

但是，这可能会在未来发生变化，因为当前官方来源中缺少此列表：
工作草案中缺少https://www.w3.org/TR/css-transitions-1/
编辑草稿中缺少https://drafts.csswg.org/css-transitions/

所以理论上这个列表有可能会在未来的浏览器版本中更新和更改，但目前它不起作用。

content 是否受其他动画影响？是的。

内容本身不可动画并不意味着它不受不透明度、可见性等其他动画的影响。它至少可以通过两种简单的方式加以利用：

a) answer by @web-tiki 提供平滑且始终可见的淡入淡出效果，但是，您必须同时牺牲 :after 和 :before 来实现它

b) 如果fadeOut => fadeIn 是您的一个选项，您可以利用CSS 动画和@keyframes

@keyframes changeContent {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    content: "See? I've changed seemlessly!";
  }
}
div:before{
  content: "HOVER OVER ME!";
  background: green;
  transition: all 1s linear;
  animation-direction: reverse;
}
div:hover:before{
  animation-fill-mode: forwards;
  animation: changeContent 3s linear forwards;
  background: orange;
}

<div />

这里重要的是把“前进” - 这是一个动画填充模式，基本上说“停止动画在它的结尾”，否则它会跳回来。
还有一个缺点 - 悬停时不容易动画化 - 如果我找到一些合理的方法，我会编辑这个答案，或者如果你知道请发表评论。

Answer 2

我认为@web-tiki 的答案符合您的需求，而且更简单。但只是为了展示另一种可能的解决方案：

您可以将图标分成两个元素，每个元素都有自己的内容。然后，在li:hover 事件上应用过渡，设置元素的不透明度反转。像这个例子：

小提琴：http://jsfiddle.net/2J7b9/1/

<ul>
    <li>
        <div class="img1"></div>
        <div class="img2"></div>
        test
    </li>
</ul>

CSS：

li {
    position: relative;
    padding-left: 30px;
}

li .img1, li .img2 {
    position: absolute;
    top: 0;
    left: 0;
}

li .img1 {
    opacity: 1;
    transition: all .25s ease-in-out;
}

li .img2 {
    opacity: 0;
    transition: all .25s ease-in-out;
}

li .img1:before {
    content: url("http://st.deviantart.net/emoticons/s/smile.gif");;
}

li .img2:before {
    content: url("http://st.deviantart.net/emoticons/r/razz.gif");
}

li:hover .img1 {
    opacity: 0;
}

li:hover .img2 {
    opacity: 1;
}

Answer 3

您可以通过使用两个伪元素 :before/after 并使用 CSS3 过渡来为悬停时的不透明度设置动画。这将在两个图像之间创建一个淡入淡出过渡。

DEMO

CSS：

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-family: arial;
    font-size: 16px;
}
a{
    color: #000000;
}
a:hover{
    color: #860000;    
}
#menu{
    margin: 15px auto;
    padding: 20px;
    width: 300px;
    background: #DDDDDD;

    border-radius: 5px;
    box-shadow: 0 0 5px #000000;
}
#menu ul{
    list-style: none;
}
#menu ul li{
    position:relative;
}
#menu li:before{
    margin-right: 10px;
    content: url("http://st.deviantart.net/emoticons/s/smile.gif");

    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
}
#menu li:after{
    content: url("http://st.deviantart.net/emoticons/r/razz.gif");
    position:absolute;
    left:0;
    opacity:0;

    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
}
#menu li:hover:after{
    opacity:1;
}
#menu li:hover:before{
    opacity:0;
}

---

编辑：

更好的是，您可以将两张图片放在另一张上面，并使用 z-index 和 css 过渡为一张图片的不透明度设置动画：

DEMO