如何将图像移动到页面的左侧

Question

我想知道如何移动图像，当我点击它应该移动到左侧中心时。

代码

<div id="myanm" > 
    <a href="#"><img src="img/home/Services.png" class="service animated fadeInUp img_move"> 
     <h2 class="txt1 shadow animated fadeInUp">SERVICES</h2> 
    </a> 
</div> 

CSS文件

.service{ 
    position:absolute; 
    left:0px; 
    bottom:0; 
    z-index:1; 
    animation-delay: 3.5s; 
    height:324px; 
    width:433px; 
} 

虽然已经动画应用我不能做点击功能。

这里是jsfiddle example

Answer 1

假设你的动画开始时的元素有service类，你可以做到这一点`onclick处理程序：

<div id="myanm"> 
    <a href="#"> 
     <img src="img/home/Services.png" class="animated fadeInUp img_move" onclick="this.classList.add('service');"> 
     <h2 class="txt1 shadow animated fadeInUp">SERVICES</h2> 
    </a> 
</div>