实现动画的4中方法settimeout及setinterval是异步实现方式，无法精确计时，只在大致时间点上运行代码，会

1、settimeout及setinterval

2、requestAnimationFrame

3、css的transition

4、css的animation

settimeout及setinterval

1、settimeout方法需使用递归函数实现动画效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>动画</title>
    <style>
        .circle{
            position:relative;
            width:50px;
            height:50px;
            background:red;
            border-radius: 25px;
            left:0;
        }
    </style>
</head>
<body>
    <div class="circle" id="circle"></div>
    <button id="start">开始</button>
    <script>
        var btn=document.getElementById('start');
        var circle=document.getElementById('circle');
        var index=0;
        var timer=null;
        function move(){
            clearTimeout(timer);
            circle.style.left=(++index)+'px';
            timer=setTimeout(move,16);
        }
        btn.onclick=function(){
            move();
        }
    </script>
</body>
</html>

2、setinterval的实现方法：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>动画</title>
    <style>
        .circle{
            position:relative;
            width:50px;
            height:50px;
            background:red;
            border-radius: 25px;
            left:0;
        }
    </style>
</head>
<body>
    <div class="circle" id="circle"></div>
    <button id="start">开始</button>
    <script>
        var btn=document.getElementById('start');
        var circle=document.getElementById('circle');
        var index=0;
        btn.onclick=function(){
            setInterval(function(){
                circle.style.left=(++index)+'px';
            },16)
        }

settimeout及setinterval是异步实现方式，无法精确计时，只在大致时间点上运行代码，会强制规定时间间隔的下限。

requestAnimationFrame

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>动画</title>
    <style>
        .circle{
            position:relative;
            width:50px;
            height:50px;
            background:red;
            border-radius: 25px;
            left:0;
        }
    </style>
</head>
<body>
    <div class="circle" id="circle"></div>
    <button id="start">开始</button>
    <script>
        var btn=document.getElementById('start');
        var circle=document.getElementById('circle');
        var index=0;
        btn.onclick=function(){
            requestAnimationFrame(function fn(){
                circle.style.left=(++index)*1+'px';
                requestAnimationFrame(fn);
            })
        }

1、requestAnimationFrame终止刷新的方法可以通过requestAnimationFrame（fn)获取标志刷新的唯一的ID，然后通过cancelAnimationFrame（ID）来终止刷新。示例： var reqid=window.requestAnimationFrame（fn); window.cancelAnimationFrame(reqid); 2、requestAnimationFrame是在主线程上完成的，意味着如果主线程忙碌，动画效果会大打折扣。

css的transition

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>动画</title>
    <style>
        .circle{
            position:relative;
            width:50px;
            height:50px;
            background:red;
            border-radius: 25px;
            left:0;
            transition:left,ease-in,1s;
        }
        .move{
            left:300px;
        }
    </style>
</head>
<body>
    <div class="circle" id="circle"></div>
    <button id="start">开始</button>
    <script>
        var btn=document.getElementById('start');
        var circle=document.getElementById('circle');
        btn.onclick=function(){
            circle.classList+=' move';
        }

animation

.air{
    animation: air 3s linear infinite;
}

@keyframes air{
    0%{ opacity: 0; transform: translateY(-1%) }
    100%{ opacity: 1; transform: translateY(1%) }
}