1.javascript动画

通过javascript在一定周期内不断地改变宽度和高度的值。动画可能没有按照预期的时间执行，因为javascript是单线程的，可能线程被其他的js代码使用而需要等待。可能出现动画不流畅的现象。

#ball{
       margin: 100px auto;    background-color: yellow;    width: 1px;    height: 1px;    border-radius: 50%;    -webkit-border-radius: 50%;}

var ball = document.getElementById('ball');    requestAnimationFrame(function draw(){    var width = ball.offsetWidth,          height = ball.offsetHeight;    if(width < 100){          requestAnimationFrame(draw);    }        ball.style.width = width + 1 + 'px';    ball.style.height = height + 1 + 'px';})

 

2.css transition

transition使css的属性值在一定的时间内平滑地过渡。

transiton: property duration timing-function delay

#ball{
           margin: 100px auto;        background-color: yellow;        width: 1px;        height: 1px;        border-radius: 50%;        transition: all 2s;        -webkit-transition: all 2s;    }

var ball = document.getElementById('ball');setTimeout(function(){    ball.style.width = '100px';    ball.style.height = '100px';},1000)

 

3.css animation帧动画

创建多个帧，从一个帧样式逐渐变化到另一个帧样式。

animation: name duration timing-function delay iteration-count direction fill-mode play-state

#ball{
           margin: 100px auto;        background-color: yellow;        border-radius: 50%;        animation: draw 2s infinite alternate;        -webkit-animation: draw 2s inifinite alternate;    }        @keyframes draw{
           from {width: 1px;height:1px;}        to {
   width: 100px;height: 100px;}    }    @-webkit-keyframes draw{
           from {width: 1px;height:1px;}        to {
   width: 100px;height: 100px;}    }

 

4.canvas

canvas不断擦除与绘制，达到动画效果。

var canvas = document.getElementById('myCanvas');if(canvas.getContext){    var context = canvas.getContext('2d');}function draw(radius){    context.beginPath();    context.arc(100,100,radius,0,Math.PI*2,true);    context.closePath();    context.fillStyle = 'yellow';    context.fill();}var radius = 1;var interval = setInterval(function(){    radius++;    if(radius >= 50){    clearInterval(interval);    return;    }    draw(radius);},20)