Opacity Animation for background-image - css

Question

I'm currently attempting to get the background image of #InnerImage to fade out. Here is the code for #InnerImage:
<div id="InnerImage" style="background-image:url('imgurl.com'););background-repeat:no-repeat;background-position:50% 0%;">
Here's the code that I'm using:
#OuterImage #InnerImage {
-webkit-animation: 3s ease 0s normal forwards 1 fadein;
animation: 3s ease 0s normal forwards 1 fadein;
}
#keyframes fadein{
0% { opacity:0; }
66% { opacity:0; }
100% { opacity:1; }
}
#-webkit-keyframes fadein{
0% { opacity:0; }
66% { opacity:0; }
100% { opacity:1; }
}
I'm running into an issue where the code is making every other child(?) div within #InnerImage fade out as well, but I only want the background-image to fade.
I have two questions:
1) I did read that it was not possible for background-image opacity changes that the above code is performing. Is there a work around for this?
2) How do I go about making it so that after the image has been faded in, it fades back out in an infinite loop?
[EDIT]
#OuterImage #InnerImage{
-webkit-animation: 3s ease 0s normal forwards 1 fadein;
animation: 3s ease 0s normal forwards 1 fadein;
animation-iteration-count: infinite;
}
#keyframes fadein{
0% { opacity:0; }
66% { opacity:0; }
100% { opacity:1; }
}
#-webkit-keyframes fadein{
0% { opacity:0; }
66% { opacity:0; }
100% { opacity:1; }
}
#OuterImage #InnerImage::before {
background: url('imgurl.com') no-repeat center left;
content: "";
position: absolute;
/* the following makes the pseudo element stretch to all sides of host element */
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: opacity 1s ease 2s;
z-index: 1;
}
#OuterImage #InnerImage {
position: relative;}
#OuterImage #InnerImage * {
position: relative;
z-index: 2;
}
#OuterImage #InnerImage

Answer 1

Answer to your first question:
Put the background-image on a pseudo element ::before instead:
#InnerImage::before {
background: url('imgurl.com') no-repeat center left;
content: "";
position: absolute;
/* the following makes the pseudo element stretch to all sides of host element */
top: 0; right: 0; bottom: 0; left: 0;
z-index: 1;
}
This requires to set position: relative; on #InnerImage:
#InnerImage {
position: relative;
}
and you need to make sure all other child elements are above the pseudo element using z-index (which only applies the way you need if you position those elements):
#InnerImage * {
position: relative;
z-index: 2;
}
Notice: #OuterImage #InnerImage can be safely shortened to #InnerImage since there may be only one element on a page with any given id value anyway. Also I'd advise not to use id selectors in CSS unless you know for sure why you are doing it.
Regarding your animation, it seems like you want it to start only after two seconds have gone by. This can be achieve using a transition like this:
transition: opacity 1s ease 2s;
where 1s is transition-duration and 2s is transition-delay.
https://developer.mozilla.org/en/docs/Web/CSS/transition
Example:
#InnerImage::before {
background: url(http://lorempixel.com/300/200) no-repeat center left;
content: "";
position: absolute;
/* the following makes the pseudo element stretch to all sides of host element */
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: opacity 1s ease 2s;
z-index: 1;
}
#InnerImage {
position: relative;
width: 300px;
height: 200px;
}
#InnerImage * {
position: relative;
z-index: 2;
}
#InnerImage:hover::before {
opacity: 0.25;
}
<div id="InnerImage">
<h2>Hey!</h2>
<button>noop</button>
</div>
If you want a permanently on-going fadein-fadeout, you'll have to go with an animation instead of a transition.
#InnerImage::before {
background: url(http://lorempixel.com/300/200) no-repeat center left;
content: "";
position: absolute;
/* the following makes the pseudo element stretch to all sides of host element */
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
animation: 3s ease 0s normal forwards 1 fadein;
animation-iteration-count: infinite;
}
#InnerImage {
position: relative;
width: 300px;
height: 200px;
}
#InnerImage * {
position: relative;
z-index: 2;
}
#keyframes fadein{
0% { opacity:0; }
50% { opacity: 1; }
100% { opacity:0; }
}
<div id="InnerImage">
<h2>Hey!</h2>
<button>noop</button>
</div>

Answer 2

To animate in an infinite loop you can use the animation-iteration-count property and set the value to infinite.
#OuterImage #InnerImage {
-webkit-animation: 3s ease 0s normal forwards 1 fadein;
animation: 3s ease 0s normal forwards 1 fadein;
animation-iteration-count: infinite;
}
Changing the opacity of an element will effect all child elements there is no way around that.
A work around you may consider is to create a element inside #InnerImage that solely handles the background. You set the background div to be position absolute, with a z-index of 0, then animate only this div. That way the other elements will not change in opacity as the animation changes.
#InnerImage {
height:200px;
position:relative;
}
.bg {
position: absolute;
height: 100%;
width: 100%;
background: red;
z-index: 0;
animation-name: fadein;
animation-duration: 6s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
.content {
position: relative;
}
#keyframes fadein{
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
<div id="InnerImage">
<div class="bg"></div>
<div class="content">other content</div>
</div>
Note in the example the text content does not fade while the background does