title: Using CSS Animations to cause a background of a div to have a flickering light effect
body: <p>Ok I'm helping my brother build a website and his main image in the background is a piece that he worked on. We want the image to transition to another PNG and go back and forth to emulate a flicking candle set. </p>
  
  <p>I'm really new to CSS animations and my first attempt was to load the base image as the default background for the header DIV and use the overlay image to do the animation but that caused issues with the text and other information on top of the DIV.</p>
  
  <p>So ideally I'd like to have both images as backgrounds on the DIV and have it slowly transition from 0% opacity to 100% opacity and alternate. I'm perfectly ok with a solution that only works IE 10 and up.</p>
  
  <p>Here is the CSS attempt</p>
  
  <pre><code>header{
      background: url(../images/header_bg_1.png);
      background-size: cover;
      background-repeat: no-repeat;
  }
  .section_overlay {
      -webkit-animation-name: example; 
      -webkit-animation-duration: 4s; 
      animation-name: animateheader;
      animation-duration: 4s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
  }
  
  @-webkit-keyframes animateheader{
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  @-moz-keyframes animateheader{
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  @-o-keyframes animateheader{
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  @keyframes animateheader{
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  </code></pre>
  
  <p>Here is the HTML Piece</p>
  
  <pre><code>    &lt;header id="HOME" style="background-position: 50% 50px;"&gt;
                &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
                  &lt;div class="container"&gt;
                    &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
                    &lt;div class="navbar-header"&gt;
                      &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
                        &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                        &lt;span class="icon-bar"&gt;&lt;/span&gt;
                        &lt;span class="icon-bar"&gt;&lt;/span&gt;
                        &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;a class="navbar-brand" href="#"&gt;&lt;img src="images/logo.png" alt=""&gt;&lt;/a&gt;
                    &lt;/div&gt;
  
                    &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
                    &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
                      &lt;ul class="nav navbar-nav navbar-right"&gt;
                        &lt;li&gt;&lt;a href="#HOME"&gt;Home&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#SERVICE"&gt;Services&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#ABOUT"&gt;About&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#TESTIMONIAL"&gt;Testimonial&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#WORK"&gt;Work&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#CONTACT"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
                  &lt;/div&gt;&lt;!-- /.container --&gt;
                &lt;/nav&gt; 
            &lt;div class="section_overlay"&gt;
                &lt;div class="container"&gt;
                    &lt;div class="row"&gt;
                        &lt;div class="col-md-12 text-center"&gt;
                            &lt;div class="home_text wow fadeInUp animated"&gt;
                                &lt;h2&gt;it’s MrCreeep&lt;/h2&gt;
                                &lt;p&gt;Tag Line would go Here&lt;/p&gt;
                                &lt;img src="images/shape.png" alt=""&gt;                        
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;          
            &lt;/div&gt;          
      &lt;/header&gt;
  </code></pre>
  
  <p>Here is two direct links to the Images. The first should transition to the second and then back again and if you can offer up any help to make it look more dynamic and flickering instead of just a standard fade in and fade out I would appreciate it greatly.</p>
  
  <p><a href="http://mrcreeep.com/images/header_bg_1.png" rel="nofollow">http://mrcreeep.com/images/header_bg_1.png</a>
  <a href="http://mrcreeep.com/images/header_bg_2.png" rel="nofollow">http://mrcreeep.com/images/header_bg_2.png</a></p>