持续动画的前端实现

前端实现持续动画有两种方式：

1. css实现持续动画。
2. JavaScript代码实现。

先来说第一种css：
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（）的优势则是：浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果