Transition from one image to another - css

Question

currently I'm using this code:
#div { background-image: url('imageurl.com'), url('imageurl2.com'); position: absolute !important; right: 0; left: 0; height: 210px !important; display: table-cell !important; vertical-align: middle !important;}
#keyframes FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#div img.top {
animation-name: FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
I'm actually trying to implement the code from Demo 3 on this website:
http://css3.bradshawenterprises.com/cfimg/
In that demo, there are two images in one div and the code is just fading the first one in and out on a timer. I tried implementing this myself using the above code, but it's fading anything in and out. Does anyone know what I'm missing?

Answer 1

If you need implementation through background-image you can use pseudo-element:
#cf2 {
position:relative;
height:281px;
width:450px;
margin:0 auto;
background-image: url("http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg");
}
#cf2::after{
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
background-image: url("http://css3.bradshawenterprises.com/images/Turtle.jpg");
background-repeat: no-repeat;
background-position: 50% 0;
background-size: cover;
}
#keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#cf2::after {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
<div id="cf2">
</div>

Answer 2

here's the implementation, they use separate <img> tags to show/hide images:
they are absolutely positioned one above the other, that one which is on top is just showing and hiding by the animation (which changes its opacity) - so the bottom one just becomes visible when top one has opacity = 0
#keyframes cf3FadeInOut {
0% {
opacity: 1;
}
45% {
opacity: 1;
}
55% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#cf3 img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
#cf3 img {
position: absolute;
left: 0;
}
#cf3 {
position: relative;
height: 281px;
width: 450px;
margin: 0 auto;
}
<div id="cf3" class="shadow">
<img class="bottom" src="http://css3.bradshawenterprises.com/images/Turtle.jpg">
<img class="top" src="http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg">
</div>