Как вращаться и вращаться в css?

Question

Я пробовал вращаться и раздвигаться отдельно, и они отлично работают. Но когда я их совмещаю, у них есть неудобная комбинация.

http://jsfiddle.net/62RJc/268/

img{ 

    border-radius:50%; 
    -webkit-transition: -webkit-transform .8s ease-in-out; 
    -ms-transition: -ms-transform .8s ease-in-out; 
    transition: transform .8s ease-in-out; 
} 

Answer 1

Its, потому что вы используете KeyFrame, вы можете добиться этого с преобразованием в одиночку.

Взгляните на это: (Кроме того, парящий в IMG, а его перемещение не является легкой задачей)

img{ 
 
    border-radius:50%;  
 
    -webkit-transition: -webkit-transform .8s ease-in-out; 
 
    -ms-transition: -ms-transform .8s ease-in-out; 
 
    transition: transform .8s ease-in-out;  
 
} 
 

 
button:hover + img { 
 
    position: relative; 
 
    transform: translateX(200px) rotate(360deg); 
 
}

<button>Animate!</button> 
 
<img src="http://lorempixel.com/output/nature-q-c-100-100-9.jpg"/>

Чтобы сделать пребывание изображения, где после того, как анимация закончилась: 1) Удалить button:hover + img {} из CSS 2) Добавить JS

JQuery:

$('button').click(function() { 
    $('img').css('transform', 'translate(200px) rotate(360deg)'); 
}); 

JS Fiddle - Элемент не возвращается в исходное положение!