イーズインアウトホバーキーフレーム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> 

トリックで、のdiv＃歓迎H1のIMG、この場合には、初期状態では、あなたの移行を入れます最終結果をアクション状態、つまり：hoverスタイルに置きます。これは、ユーザーがロールオーバーすると、矢印がスムーズに回転してロールオフすることを意味します。

The ease part of the styling is explained here.