title: Flickering light (on click) animation in CSS3
body: <p>I have a HTML5 comic book for iPad only that I am making interactive.  On Page 8 of the comic book (see link below), the scene I am referring to is in the bottom right and should appear dark because there is currently a  with a dark version of what is underneath it, to make it look as though light has not been switched on. </p>
  
  <p><a href="http://www.spiritdigital.co.uk/outpost/issue-interactive/08.html" rel="nofollow">Link to the comic</a></p>
  
  <p>Here's what I want to happen:</p>
  
  <ol>
  <li>On click, a sound plays (perfect)</li>
  <li>On click, the opacity of the dark background  layer flickers on and off in sync with the short electricity sound effect heard at the beginning of the sound that plays.  The opacity should end at 0, to show that the light is now on.</li>
  </ol>
  
  <p>Here's what currently happens:</p>
  
  <ol>
  <li>On click, a sound plays (perfect)</li>
  <li>On click, the opacity of the dark background  layer sets to 0 but it returns to 1 once the user releases the click.</li>
  </ol>
  
  <p>Basically, I to introduce a delay to the opacity and a 'flicker' between the opacity parameters to imitate a flickering light.</p>
  
  <p>HTML
      </p>
  
  <pre><code>&lt;a href="#" onclick="if(!playing) document.getElementById('player').play(); else document.getElementById('player').pause();"&gt;
  
      &lt;div class="ibox" id="p8s5"&gt;
  
          &lt;div id="flicker"&gt;&lt;/div&gt;    
  
          &lt;button id="playButt" class="animated flash" onclick="if(!playing) document.getElementById('player').play(); else document.getElementById('player').pause();"&gt;                
          &lt;/button&gt;
  
      &lt;/div&gt; 
  
  &lt;/a&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>div#flicker {
  opacity: 1;
  -transition-property: opacity;
  -webkit-transition-duration: 0s;
  -webkit-transition-delay: 0s;
  position: absolute;
  bottom: 1px; right: 1px;
  width: 245px; height: 341px;
  background: url('img/p8s5.jpg') no-repeat;
  }
  
  div#flicker:active, div#flicker:focus {
    opacity:0;
  }
  </code></pre>
  
  <p>Hope you can help.</p>
  
  <p>Many thanks,
  Matt</p>