CODEWITHSUNDEEP
htmlcss
Audity
Audity

Reputation: 49

Flickering light (on click) animation in CSS3

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.

Link to the comic

Here's what I want to happen:

  1. On click, a sound plays (perfect)
  2. 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.

Here's what currently happens:

  1. On click, a sound plays (perfect)
  2. On click, the opacity of the dark background layer sets to 0 but it returns to 1 once the user releases the click.

Basically, I to introduce a delay to the opacity and a 'flicker' between the opacity parameters to imitate a flickering light.

HTML 

<a href="#" onclick="if(!playing) document.getElementById('player').play(); else document.getElementById('player').pause();">

    <div class="ibox" id="p8s5">

        <div id="flicker"></div>    

        <button id="playButt" class="animated flash" onclick="if(!playing) document.getElementById('player').play(); else document.getElementById('player').pause();">                
        </button>

    </div> 

</a>

CSS

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;
}

Hope you can help.

Many thanks, Matt

Upvotes: 0

Views: 6301

Answers (1)

admenva
admenva

Reputation: 2421

This jsfiddle may solve your problem.

First of all, it creates an animation with css3:

.animateFlicker {
    -webkit-animation: flicker 17s;    
}

@-webkit-keyframes flicker{
    0% {opacity:1}
    3% {opacity:0}
    6% {opacity:0}
    7% {opacity:1}
    8% {opacity:0}
    9% {opacity:1}
    10% {opacity:0}
    99% {opacity:0}
    100% {opacity:1}
}

And then it listens to the click event with jQuery to execute the animation and stop it after the time is over.

$('#flicker').click(function(){
    var $this = $(this);
    $this.addClass('animateFlicker');
    setTimeout(function() 
    {
        $this.removeClass('animateFlicker');
    }, 17000);    
});​

Note I have only used webkit, so you will need to change it to make it work properly in all browsers.

Upvotes: 2

Related Questions