title: Opacity Animation for background-image
body: <p>I'm currently attempting to get the background image of #InnerImage to fade out. Here is the code for #InnerImage: </p>
  
  <pre><code>&lt;div id="InnerImage" style="background-image:url('imgurl.com'););background-repeat:no-repeat;background-position:50% 0%;"&gt;
  </code></pre>
  
  <p>Here's the code that I'm using:</p>
  
  <pre><code>#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; }
  }
  </code></pre>
  
  <p>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. </p>
  
  <p><br><br><br>I have two questions:
  <br>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?
  <br>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?</p>
  
  <p>[EDIT] <br></p>
  
  <pre><code>#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
  </code></pre>