前端实现持续动画有两种方式：
1. css实现持续动画。
2. JavaScript代码实现。
先来说第一种：
css3是在原有的css的基础上增加了些新的特性，其中就包含animation。css实现持续动画就是使用了animation这个属性。
主要代码如下：
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /Safari and Chrome/
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /Safari and Chrome/
{
from {left:0px;}
to {left:200px;}
}
注意问题：要考虑到兼容浏览器。
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
使用时的语法：
animation: name duration timing-function delay iteration-count direction;
接下来说第二种：
想起要写这些持续的问题，我们第一个想到的应该时setTimeOut方法吧 ，今天说一个其他的方法
//
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60);
};
})();
var e = document.getElementById(“e”);
var flag = true;
var left = 0;
function render() {
left == 0 ? flag = true : left == 100 ? flag = false : ”;
flag ? e.style.left = ${left++}px :
e.style.left = ${left--}px;
}
(function animloop() {
render();
requestAnimFrame(animloop);
})();
requestAnimationFrame()函数就是针对动画效果的API，在浏览器端，用在DOM上的风格变化或画布动画或WebGL中。浏览器现在基本都支持这个方法。
此方法相对于setTimeOut（）的优势则是：浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果