在没有jQuery或其他库的情况下用JavaScript简化动画

Question

I want to have a <div> come into a webpage from the right when you hover over it. So something like this:

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

But I don't want to use jQuery or any other libraries. Is there a built-in mechanism within JavaScript to animate the position? Or do I call requestAnimationFrame() repeatedly until the <div> is where I want it to be?

I only care about modern browsers.

Answer 1

Use CSS transition.

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.