une transition activer en utilisant javascript css

Question

J'ai une img que je voudrais être en mesure de cliquer sur et avoir mon

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

séjour mis à l'échelle! Je me rends compte que css seul ne peut pas faire cela, car j'atteins la transition quand je clique, mais je le perds quand je relâche le bouton de la souris. Est-ce que Javascript est la solution pour cela? Y-a-t-il un css psudoclass qui peut le faire je ne sais pas?

Voici un meilleur exemple de ce que je veux activer

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

Answer 1

plutôt que de compter sur :active dans la feuille de style, faire une classe séparée avec les transformations.

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

puis ajoutez un gestionnaire d'événements, cliquez js à votre élément

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

semble bien fonctionner en chrome.