css - Firefox でこの CSS トランジションの揺れを軽減するにはどうすればよいですか?

Question

Firefox だけでなく、Safari または Chrome で次のフィドルをテストしてください。Safari では、マウスが div の上に置かれなくなった後でも (div がマウスを超えて移動した場合)、アニメーションがスムーズであることがわかります。ただし、Firefox では、マウスが触れなくなった場所に div が移動すると、元の位置に戻り始めるため、見苦しい揺れが発生します。JavaScript を使用してこの問題を解決できますか?

jsフィドル

#object01 {
   position:relative;
   margin-top:10em;
   width:300px;
   height:300px;
   background-color:red;
   border:2px solid black;
   transform:rotate(5deg);
   -webkit-transform:rotate(5deg);
   -moz-transform:rotate(5deg);
   -o-transform:rotate(5deg);
   -ms-transform:rotate(5deg);
   z-index:1000;
   transition:all 1s ease;
   -webkit-transition:all 1s ease;
   -ms-transition:all 1s ease;
   -moz-transition:all 1s ease;
   -o-transition:all 1s ease;
   top:0;
}

#object01:hover {
   transform:rotate(0deg);
   -webkit-transform:rotate(0deg);
   -moz-transform:rotatate(0deg);
   -o-transform:rotate(0deg);
   -ms-transform:rotate(0deg);
   top:-250px;
}