可以在标签＆＃39;内容＆＃39;上使用淡入淡出过渡只用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

您可以使用两个伪元素: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

Answer 2

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

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

FIDDLE：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

您的情况特别

不确定您为什么要尝试将图片放入内容中，
您只需将图像作为background-image添加到:before，
设置其大小和display: inline-block;，然后就可以像这样http://jsfiddle.net/7f695m1q/设置background-image的动画了，因为背景图像过渡 是 < / em>支持：）

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 />

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