CSS3动画

.bird {
        min-width: 91px;
        min-height: 71px;
        top: 10%;
        position: absolute;
        z-index: 10;
        background: url(http://img.mukewang.com/55ade1700001b38302730071.png)
    }
   
1.css部分   

.birdFly {
        /*写法1*/
        -moz-animation: bird-slow 400ms steps(1,start) infinite;
        /*写法2*/
        -webkit-animation-name: bird-slow;
        -webkit-animation-duration: 400ms;
        -webkit-animation-timing-function: steps(3);
        -webkit-animation-iteration-count: infinite;
    }
    @-webkit-keyframes bird-slow {
        0% {
            background-position: -0px 0px;
        }
        100% {
            background-position: -273px 0px;
        }
    }
    @-moz-keyframes bird-slow {
        0% {
            background-position: -182px 0px;
        }
        50% {
            background-position: 0px 0px;
        }
        75% {
            background-position: -91px 0px;
        }
        100% {
            background-position: -182px 0px;
        }
    }

body部分<div class="bird birdFly"></div>

2、精灵图片

css:.bird {        width: 3rem;         height: 3rem;         top: 10%;         position: absolute;         z-index: 10;         background: url();

　　//把精灵图片分成几部分，做关键帧动画的时候切换position         background-size: 300% 100%;     }         .birdFly {         /*写法1*/         -moz-animation-name: bird-slow;         -moz-animation-duration: 400ms;         -moz-animation-timing-function: steps(1,start);         -moz-animation-iteration-count: infinite;         /*写法2*/         -webkit-animation:bird-slow 400ms steps(3) infinite;     }     /*图片精灵*/     @-webkit-keyframes bird-slow {         0% {             background-position: -0% 0%;         }         100% {             background-position: -300% 0%;         }     }         @-moz-keyframes bird-slow {         0% {             background-position: -0% 0%;         }         50% {             background-position: -100% 0%;         }         75% {             background-position: -200% 0%;         }         100% {             background-position: -300% 0%;         }     }

3、图片元素运动

使用transaction

$("button").on("click",function(){
    /**
     * 通过transition的方式改变运动
     */
    $(".bird").transition({
        'right': "3rem",
    }, 10000,'linear',function(){
        alert("结束")
    })
})