如何將圖像移動到頁面的左側

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>