activate a css transition using javascript
12,511
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.
Comments
-
thatmiddleway almost 2 years
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?
Here is a better example of what I want to activate
.image_flip { -webkit-animation-name: box_walk; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: linear; } @-webkit-keyframes box_walk { 0% {} 100% { -webkit-transform:rotateY(180deg); } }