Search code examples
javascriptcsshtmlreveal.js

CSS Animations Onclick

Using regular JS (not JQuery) I am trying to make some images shake after they are clicked but it is not working.

HTML:

    <img id='s1_imgB' class="fragment"... onClick="wrongAnswer()"...

JS:

    function wrongAnswer(){ 
        document.getElementById("s1_imgB").style.className = "shake";

CSS:

    .shake:hover {....

I can get the elements to shake by default using the following html. But, I want to have the CSS animation initiate after the image is clicked.

HTML:

    <img id='s1_imgB' class="fragment shake"....

When the page loads, the mouse hover affect should be inactive, then after the image is clicked, the mouse hover should cause the image to shake.

What am I doing wrong? Thanks

Solution

  • I think it should be

    document.getElementById("s1_imgB").className += " shake";