Ease-in-out on hover Keyframe CSS3

Question

Пытается анимировать простой поворот с помощью ключевого кадра. Это все хорошо, но я ненавижу, как он просто внезапно останавливается на мыши. Я пробовал:

-webkit-animation-timing-function: ease-in-out; 

, но это относится только к кадрам не анимации в целом.

Это то, что у меня есть, любая помощь оценивается.

@-webkit-keyframes Rotate { 
0% { 
    -webkit-transform:rotate(0deg); 
} 
100% { 
    -webkit-transform:rotate(360deg); 
} } 

И парить

a:hover { 
-webkit-animation-name: Rotate; 
-webkit-animation-duration: 0.5s; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: linear; } 

Answer 1

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

В примере, в котором я работал, мне нужна стрелка, которая обращена прямо к вам, а затем при опрокидывании плавно поворачивается, чтобы опустить вниз. Вот код:

div#welcome img{ 
      -webkit-transition: 1.5s all ease; 
      -moz-transition: 1.5s all ease; 
      -o-transition: 1.5s all ease; 
    transition: 1.5s all ease;    
} 

div#welcome:hover img { 
     -webkit-transform: rotate(90deg); 
     -moz-transform: rotate(90deg); 
     -o-transform: rotate(90deg); 
    transform: rotate(90deg); 
} 

И вот наценка FYI:

<div id="welcome"> 
      <h1>Welcome 
      </h1> 
      <img class="hover" src="images/arrow.png" /> 
      <p> 
       blah blah blah 
      </p> 
     </div> 

Хитрость заключается в том, положи переход в исходное состояние, в этом случае ДИВ # Добро пожаловать h1 IMG то поместите конечный результат в состояние действия, то есть стиль: hover. Это будет означать, когда пользователь перевернется, и стрелка будет плавно вращаться, а затем выключена.

The ease part of the styling is explained here.