使用onClick事件触发CSS3转换

我正在尝试使用css3转换，并希望引入onClick事件来触发转换，而不是伪悬停类。我遇到的问题是过渡分为两个元素。使用onClick事件触发CSS3转换

下面是HTML：

<div class="box"><img src="images/1.jpg" width="300" height="200" alt=""/> 
<div class="mask"> 
<!-- Further content goes here --> 
</div> 
</div>

这里是CSS：

.box { 
    width: 300px; 
    height: 200px; 
    position: relative; 
    overflow: hidden; 
    border: solid 2px #E6171A;    
} 

.mask { 
    width: 300px; 
    height: 200px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-color: #021288; 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
     filter: alpha(opacity=0); 
     opacity: 0; 
     -webkit-transform: scale(0) rotate(-360deg); 
     -moz-transform: scale(0) rotate(-360deg); 
     -o-transform: scale(0) rotate(-360deg); 
     -ms-transform: scale(0) rotate(-360deg); 
     transform: scale(0) rotate(-360deg); 
     -webkit-transition: all 0.4s ease-in; 
     -moz-transition: all 0.4s ease-in; 
     -o-transition: all 0.4s ease-in; 
     -ms-transition: all 0.4s ease-in; 
     transition: all 0.4s ease-in; 
} 

.box:hover .mask { 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=40)"; 
    filter: alpha(opacity=40); 
    opacity: .4; 
    -webkit-transform: scale(1) rotate(0deg); 
    -moz-transform: scale(1) rotate(0deg); 
    -o-transform: scale(1) rotate(0deg); 
    -ms-transform: scale(1) rotate(0deg); 
    transform: scale(1) rotate(0deg); 
    -webkit-transition-delay: .4s; 
    -moz-transition-delay: .4s; 
    -o-transition-delay: .4s; 
    -ms-transition-delay: .4s; 
    transition-delay: .4s; 
} 

.box img { 
    -webkit-transition: all 0.4s ease-in-out 1.3s; 
    -moz-transition: all 0.4s ease-in-out 1.3s; 
    -o-transition: all 0.4s ease-in-out 1.3s; 
    -ms-transition: all 0.4s ease-in-out 1.3s; 
    transition: all 0.4s ease-in-out 1.3s; 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: alpha(opacity=100); 
    opacity: 1; 
} 

.box:hover img { 
    -webkit-transform: translateX(300px); 
    -moz-transform: translateX(300px); 
    -o-transform: translateX(300px); 
    -ms-transform: translateX(300px); 
    transform: translateX(300px); 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    -webkit-transition-delay: .8s; 
    -moz-transition-delay: .8s; 
    -o-transition-delay: .8s; 
    -ms-transition-delay: .8s; 
    transition-delay: .8s; 
/* the delay goes in the hover(action state) to overide the delay in the original state  */ 
}

所以，问题是如何申请的onClick事件到分布在两个元素的过渡？希望有人能帮助！

来源

2014-06-24 Steve Joiner