在沒有jQuery或其他庫的情況下在JavaScript中緩動動畫

Question

當您將鼠標懸停在網頁上時，我想讓<div>進入網頁。所以像這樣：

$('div.from_right').hover(function() { 
    $(this).animate({right: '-300px'}); 
}); 

但我不想使用jQuery或任何其他庫。 JavaScript中是否有內置的機制來激活位置？或者我反覆撥打requestAnimationFrame()，直到<div>是我想要的位置？

我只關心現代瀏覽器。

Answer 1

使用CSS轉換。

div { 
    width:100px; 
    height:100px; 
    background:red; 
    -webkit-transition:margin 3s ease-out; 
    -moz-transition:margin 2s ease-out; 
    -o-transition:margin 2s ease-out; 
    -ms-transition:margin 2s ease-out; 
    transition:margin 2s ease-out; 
} 
div:hover { 
    margin-left:300px; 
} 

DEMO.