activate a css webkit transition using javascript onclick

Question

I have an img that I would like to be able to click on and have my

.image_click:active {
-webkit-transition-duration: 500ms;
 -webkit-transform: scale(1.5);

}

stay scaled! I realize that css alone can't do this, as I achieve the transition when I click, but lose it when I release the mouse button. Is Javascript the solution for this? Is there a css psudoclass that can do this I don't know about?

Answer 1

rather than relying on :active in the style sheet, make a separate class with the transforms.

.image_click_clicked
{
    -webkit-transition-duration: 500ms;
    -webkit-transform: scale(1.5);
}

and then add a js click event handler to your element

<img src="foo.png" class="image_click" 
     onclick="this.className='image_click_clicked';" />

seems to work ok in chrome.