单击时的 CSS / JS 动画

Question

So I'm trying to build a simple online js game (I'm taking a course at the moment and wanted to have a little experiment). I downloaded the game duck hunt ( https://github.com/MattSurabian/DuckHunt-JS ) and expanded it from there.

I have added levels / adjust the game fine however I have added a character on the screen by using CSS and adding it into the html (switching the game from a first person view to more a third person perspective)

I would like to add an animation from when you click on the screen water will come from the statues mouth and hit the enimies... at the moment there is a flash when the user clicks however i wish to change this I'm not sure how this would be achieved?

Any help would be grateful.

Flash Screen Code at the moment :

//bind to gun events
        this.playfield.on('gun:out_of_ammo',_.bind(function(){this.outOfAmmo();},this));
        this.playfield.on('gun:fire',_.bind(function(){
            this.flashScreen();
        },this));

flashScreen : function(){
    $(".theFlash").css("display","block");
    setTimeout(function(){
        $('.theFlash').css("display","none");
    },70);
}

CSS:

.theFlash{
    background:#ffffff;
    width:900px;
    height:500px;
    position:relative;
    margin:0 auto;  
    z-index:10;
    display:none;
}

Answer 1

You should look up :hover for css http://www.w3schools.com/cssref/sel_hover.asp

:hover {
    css declarations;
}