html5添加图片动画效果的方法：1、利用css3 animation的steps实现spirit精灵动画；2、利用html5 canvas实现gif图片。

本教程操作环境：windows7系统、html5& & css3版，DELL G3电脑。

html5添加图片动画效果的方法：

方法一：利用css3 animation的steps实现spirit精灵动画；

在应用 CSS3 渐变/动画时，有个控制时间的属性timing-function> 。它的取值中除了常用到的 三次贝塞尔曲线 以外，还有个让人比较困惑的 steps() 函数。

steps() 第一个参数 number 为指定的间隔数（必须是正整数），即把动画分为 n 步阶段性展示，第二个参数默认为 end，设置最后一步的状态，start 为结束时的状态，end 为开始时的状态。

那么有了这个steps()，我们就可以实现web中常见的Sprite 精灵动画了，见demo：

!DOCTYPE html>
    
html>
    
    head>
    
    meta charset="utf-8">
    
    meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    title>
    /title>
    
    link rel="stylesheet" href="">
    
    style>

    .bird{
    background: url(bird.png);
    width: 140px;
    height:85px;
    animation: bird 2s steps(8) infinite;
 }

    @keyframes bird{

       from {
    
          background-position: 0 0;

       }

       to {
    
          background-position: -800% 0px;

       }

    }
    
    /style>
    
    /head>
    
    body>
    
       div>
    /div>
    
    /body>
    
/html>
    

方法二：利用html5 canvas实现gif图片；

利用canvas的drawImage把含有帧的图片加载到canvas中去，再结合js实现动画，见demo：

!DOCTYPE html>
    
html>
    
head>
    
    meta charset="UTF-8">
    
    title>
    canvas帧--实现动画/title>
    
    style>

        *{
    padding:0;
    margin:0;
}

        canvas{
    display:block;
background:white}
    
    /style>
    
/head>
    
body>
    
    canvas>
    /canvas>
    
script>
    
    var imgPic = new Image();
    
    imgPic.src = 'http://www.cj365.cc/demo/bird/bird.png';
    
    var canvas = document.querySelector('canvas');
    
    canvas.width = window.innerWidth;
    
    canvas.height = window.innerHeight;
    
    var ctx = canvas.getContext('2d');

    imgPic.onload = function () {

        drawImg()
    }
    
    var i = 0;
    
    var lastTime = new Date().getTime();
    
    var delatime;
    
    var timer = 0;

    function drawImg() {
    
        window.requestAnimationFrame(drawImg);
    
        var now = new Date().getTime();
    
        delatime = now - lastTime;
    
        lastTime = now;
    
        timer += delatime;
    
        if (timer >
 200) {
    
            i++;
    
            if (i >
     7) i = 0;

            timer = 0
        }
    
        console.log(delatime)
        ctx.drawImage(imgPic, i * 140, 0, 140, 85, (canvas.width - 140) / 2, (canvas.height - 85) / 2, 140, 85);

    }
    
/script>
    
/body>
    
/html>