## 一、实现动画的方式  优先使用CSS3来实现动画，在不支持CSS3时候， 动画示例如下： ``` <button id="btn">start</button> <div id="box" class="box"></div> ``` ``` * { padding: 0; margin: 0; } .box { width: 100px; height: 100px; background-color: red; } ``` ``` .box { transition: transform 1s; } // 使用 CSS3 transition var boxEl = document.getElementById('box'), btnEl = document.getElementById('btn'); var dest = window.innerWidth - 100; btnEl.addEventListener('click', function () { move(boxEl, dest); }, false); function move(el, position) { el.style.transform = 'translate3d(' + position +'px, 0, 0)'; } ``` ``` // 或者使用 requestAnimationFrame var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function (fn) { setTimeout(fn, 16); }; var boxEl = document.getElementById('box'), btnEl = document.getElementById('btn'); var dest = window.innerWidth - 100, speed = 10, position = 0; btnEl.addEventListener('click', function () { requestAnimationFrame(step); }, false); function move(el, position) { el.style.transform = 'translate3d(' + position +'px, 0, 0)'; } function step() { if (position < dest) { position += speed; move(boxEl, position); requestAnimationFrame(step); } else { position = dest; move(boxEl, position); } } ```