使用javascript激活css转换

使用javascript激活css转换,javascript,html,css,webkit,Javascript,Html,Css,Webkit,我有一个img,我想能够点击并拥有我的 .image_click:active { -webkit-transition-duration: 500ms; -webkit-transform: scale(1.5); } 保持平衡!我意识到css本身无法做到这一点,因为我在单击时实现了转换,但在释放鼠标按钮时失去了转换。Javascript是解决这个问题的方法吗?是否有一个css psudoclass可以做到这一点,我不知道 下面是一个我想要激活的更好的例子 .image_flip {

我有一个img,我想能够点击并拥有我的

.image_click:active {
  -webkit-transition-duration: 500ms;
  -webkit-transform: scale(1.5);
}
保持平衡!我意识到css本身无法做到这一点,因为我在单击时实现了转换,但在释放鼠标按钮时失去了转换。Javascript是解决这个问题的方法吗?是否有一个css psudoclass可以做到这一点,我不知道

下面是一个我想要激活的更好的例子

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

不要依赖样式表中的
: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中似乎工作正常