Как перенести изображение в левый центр страницы

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>