css content property transition in animation keyframe [duplicate] - css

Question

Please view this code jsfiddle:
http://jsfiddle.net/rflfn/6wCp6/
<div id="menu">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</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");
}
I have one image on tag 'li' and other image on 'li:hover', is possible make transition with fade only using css?

Answer 1

You can do this by using both pseudo elements :before/after and using the CSS3 transition to animate the opacity of both on hover. This will create a fade transition between both images.
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;
}
EDIT :
Even better, you can position both images one on top of the other and with z-index and css transition animate the opacity of ony one image :
DEMO

Answer 2

Your case in particular
Not sure why're you trying to put images in content,
you could simply add that image as a background-image to the :before,
set it size & display: inline-block; and you would just animate the background-image like so: http://jsfiddle.net/7f695m1q/ , since background-image transition is supported :)
TL;DR: Can content CSS property be animated? No.
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
OUTDATED w3.org official document: https://www.w3.org/TR/2017/WD-css-transitions-1-20171130/#animatable-css
This may however change in future because this list is missing in current official sources:
missing in working draft https://www.w3.org/TR/css-transitions-1/
missing in editor's draft https://drafts.csswg.org/css-transitions/
So in theory there is a possibility this list will be updated and changes made in future browser versions, but currently it doesn't work.
Is content affected by other animations? Yes.
Content not being animatable in itself doesn't mean it's not affected by other animations like opacity, visibility etc. It can be leveraged in at least 2 simple ways:
a) answer by #web-tiki provides a smooth&always visible fade effect, however, you have to sacrifce both :after and :before to it
b) if fadeOut => fadeIn is an option for you you can levarage CSS animations & #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 />
Important here is to put the "forward" - it's an animation fill mode that basically says "stop the animation at it's end", otherwise it'd jump back.
There is also one drawback - it's not easily animatable on hover-out - if I find some reasonable way I will edit this answer or please comment if you know.

Answer 3

I think #web-tiki 's answer suits your needs and it's simpler. But just to show another possible solution:
You can separate the icons in two elements, each with its own content. Then, apply the transition on the li:hover event, setting the element's opacity inverted. Like this example:
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;
}