активировать переход CSS с использованием JavaScript

Question

У меня есть изображение, на которое я хотел бы кликнуть, и у меня есть

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

оставайся в масштабе! Я понимаю, что одна только CSS не может сделать это, так как я достигаю перехода, когда нажимаю, но теряю его, когда отпускаю кнопку мыши. Является ли Javascript решением для этого? Есть псевдокласс css, который может сделать это, о котором я не знаю?

Вот лучший пример того, что я хочу активировать

.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

вместо того, чтобы полагаться на :active в таблице стилей, создайте отдельный класс с преобразованиями.

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

и затем добавьте обработчик события js click к вашему элементу

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

, кажется, работает нормально в Chrome.