CSS 3が簡単に外れなくなります

Question

http://jsfiddle.net/wX6eU/

出力パラメータを指定しなくても、回転が容易になります。どのように私はそれを360に留めるか、アニメーションなしで0に戻すことができますか？

div { 
    position: absolute; 
    left: 100px; 
    top: 100px; 
    width: 100px; 
    height: 100px; 
    background-color: blue; 
    -webkit-transition:-webkit-transform 0.5s ease-in; 
} 
div:hover { 
    -webkit-transform:rotate(360deg); 
} 

Answer 1

私はそれを「中」とは異なる「アウト」でタイミングを設定することが可能です信じていません。 ease-inオプションがタイミング機能です。他のオプションは、default,linear,ease-out,ease-in-outおよびcubic-bezierである。 read more about them hereでも構いませんが、残念ながら0秒にトランジションアウトを設定する情報はありません。

別のオプションは、必要な機能を取得し、まだCSSアニメーションを使用するようにJSを使用することがあります

$(function(){ 
    var timer; 
    $('.animated').hover(function(){ 
    timer = setTimeout(function(){ $('.animated').removeClass('animated') }, 500) 
    }, function(){ 
    clearTimeout(timer); 
    $(this).addClass('animated'); 
    }); 
}); 

Answer 2

ジャスト:hover疑似セレクタ内移行を置く：

div { 
    position: absolute; 
    left: 100px; 
    top: 100px; 
    width: 100px; 
    height: 100px; 
    background-color: blue; 
} 
div:hover { 
    -webkit-transform:rotate(360deg); 
    -webkit-transition:-webkit-transform 0.5s ease-in; 
} 

http://jsfiddle.net/DgBDt/