CSS3的Animation

    1、animation-name ：动画名
    2、animation-duration：时间
    3、animation-delay：延时
    4、animation-iteration-count：次数
    5、 animation-direction：方向
    6、 animation-play-state：控制
    7、 animation-fill-mode：状态
    8、 animation-timing-function：关键帧变化

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>圣诞主题</title>
    <style type="text/css">
    .bird {
        min- 91px;
        min-height: 71px;
        top: 10%;
        position: absolute;
        z-index: 10;
        background: url(http://img.mukewang.com/55ade1700001b38302730071.png)
    }

    .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;
    }

    /*???*/
    @keyframes bird-slow {
    0% {background-position-x: -0px}
    100% {background-position-x: -273px}
}

</style>
</head>

<body>
    steps(3)实现帧动画
    <div class="bird birdFly"></div>
</body>
<script type="text/javascript">
var docEl = document.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
        //设置根字体大小
        docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
    };

//绑定浏览器缩放与加载时间
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);
</script>

</html>