イメージをページ中央の左に移動する方法

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

です。ここで

要素がserviceクラスを持っているときにアニメーションを開始すると仮定するとjsfiddle example

Answer 1

である、あなたは `の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>