6-6 鸟动画的实现
本节编程练习不计算学习进度，请电脑登录imooc.com操作

鸟动画的实现

飞鸟动画也跟小男孩动画一样，通过精灵与transition的组合实现

在页面增加一个鸟的HTML结构

<div class="bird"></div>

CSS布局比较简单，通过background-position加载精灵图，做动画的元素都是需要设置position：absolute这样才能独立漂浮文档流，让页面的重绘更少

图片变化部分采用的是CSS3的animation，通过设置animation-timing-function: step-start;马上跳到动画每一帧结束的状态，这样就让动画执行一帧一帧的切换效果

@-webkit-keyframes bird-slow {
    0% { background-position: -182px 0px; }
    50% {background-position: 0px 0px;}
    75% {background-position: -91px 0px;}
    100% {background-position: -182px 0px;}
}

以上是4个变化点，但是实际上我们只有3张图，0% 100%是最后一帧，这是因为设置step-start了的缘故，注意下这个写法就可以了

移动部分就很简单，我们移动left或者right的值，距离就是一个页面单位，注意下正负取值

具体的实现，可以参考下源码部分

任务

在pageB.css文件中，代码第87和92行分别填写代码，实现鸟飞的动作

0% {
    background-position: -182px 0px;
}
50% {
    background-position: 0px 0px;
}
75% {
    background-position: -91px 0px;
}
100% {
    background-position: -182px 0px;
}
index.htmlQixi.jsSwipe.jsstyle.csspageA.csspageB.css 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title>慕课七夕主题</title>
  7.     <link rel='stylesheet' href='style.css' />
  8.     <link rel='stylesheet' href='pageA.css' />
  9.     <link rel='stylesheet' href='pageB.css' />
  10.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  11.     <script type="text/javascript" src="http://img1.sycdn.imooc.com//down/55ac9ea30001ace700000000.js"></script>
  12. </head>
  13.  
  14. <body>
  15.     <div id='content'>
  16.         <ul class='content-wrap'>
  17.             <!-- 第一副画面 -->
  18.             <li>
  19.                 <!-- 背景 -->
  20.                 <div class="a_background">
  21.                     <div class="a_background_top"></div>
  22.                     <div class="a_background_middle"></div>
  23.                     <div class="a_background_botton"></div>
  24.                 </div>
  25.                 <!-- 云 -->
  26.                 <div class="cloudArea">
  27.                     <div class="cloud"></div>
  28.                     <div class="cloud"></div>
  29.                 </div>
  30.                 <!-- 太阳 -->
  31.                 <div id="sun"></div>
  32.             </li>
  33.             <!-- 第二副画面 -->
  34.             <li>
  35.                 <!-- 背景图 -->
  36.                 <div class="b_background"></div>
  37.                 <div class="b_background_preload"></div>
  38.                 <!-- 商店 -->
  39.                 <div class="shop">
  40.                     <div class="door">
  41.                         <div class="door-left"></div>
  42.                         <div class="door-right"></div>
  43.                     </div>
  44.                     <!-- 灯 -->
  45.                     <div class="lamp"></div>
  46.                 </div>
  47.                 <!-- 鸟 -->
  48.                 <div class="bird"></div>
  49.             </li>
  50.             <li> 页面3 </li>
  51.         </ul>
  52.         <div id="boy" class="charector"></div>
  53.     </div>
  54.     <div class="button">
  55.         <button>开始</button>
  56.     </div>
  57. </body>
  58. <script type="text/javascript">
  59. $(function() {
  60.  
  61.     var container = $("#content");
  62.     var swipe = Swipe(container);
  63.     // 页面滚动到指定的位置
  64.     function scrollTo(time, proportionX) {
  65.         var distX = container.width() * proportionX;
  66.         swipe.scrollTo(distX, time);
  67.     }
  68.  
  69.     ////////////////////////////////////////////////////////
  70.     // ================= 动画处理 ======================= //
  71.     ////////////////////////////////////////////////////////
  72.  
  73.     // 用来临时调整页面
  74.     swipe.scrollTo(container.width(), 0);
  75.  
  76.     var boy = BoyWalk()
  77.  
  78.     /////////
  79.     //右边飞鸟 //
  80.     /////////
  81.     var bird = {
  82.         elem: $(".bird"),
  83.         fly: function() {
  84.             this.elem.addClass('birdFly')
  85.             this.elem.transition({
  86.                 right: container.width()
  87.             }, 15000, 'linear');
  88.         }
  89.     };
  90.  
  91.  
  92.     function startRun() {
  93.  
  94.         boy.walkTo(2000, 0.5)
  95.             .then(function() {
  96.                 //暂停走路
  97.                 boy.stopWalk()
  98.             })
  99.             .then(function() {
  100.                 // 开门
  101.                 return openDoor();
  102.             })
  103.             .then(function() {
  104.                 // 开灯
  105.                 lamp.bright();
  106.             })
  107.             .then(function() {
  108.                 // 进商店
  109.                 return boy.toShop(2000);
  110.             }).then(function(){
  111.                 // 取花
  112.                 return boy.talkFlower();
  113.             }).then(function() {
  114.                 // 飞鸟
  115.                 bird.fly();
  116.             }).then(function() {
  117.                 // 出商店
  118.                 return boy.outShop(2000);
  119.             }).then(function(){
  120.                 // 关门
  121.                 return shutDoor();
  122.             }).then(function() {
  123.                 // 灯暗
  124.                 lamp.dark();
  125.             });
  126.     }
  127.  
  128.  
  129.     // 开始
  130.     $("button:first").click(startRun);
  131.  
  132. })
  133. </script>
  134. <script type="text/javascript" src="Swipe.js"></script>
  135. <script type="text/javascript" src="Qixi.js"></script>
  136.  
  137. </html>
  1. ///////////
  2.     //灯动画 //
  3.     ///////////
  4.     var lamp = {
  5.         elem: $('.b_background'),
  6.         bright: function() {
  7.             this.elem.addClass('lamp-bright');
  8.         },
  9.         dark: function() {
  10.             this.elem.removeClass('lamp-bright');
  11.         }
  12.     };
  13.  
  14.  
  15.     function doorAction(left, right, time) {
  16.         var $door = $('.door');
  17.         var doorLeft = $('.door-left');
  18.         var doorRight = $('.door-right');
  19.         var defer = $.Deferred();
  20.         var count = 2;
  21.         // 等待开门完成
  22.         var complete = function() {
  23.             if (count == 1) {
  24.                 defer.resolve();
  25.                 return;
  26.             }
  27.             count--;
  28.         };
  29.         doorLeft.transition({
  30.             'left': left
  31.         }, time, complete);
  32.         doorRight.transition({
  33.             'left': right
  34.         }, time, complete);
  35.         return defer;
  36.     }
  37.  
  38.     // 开门
  39.     function openDoor() {
  40.         return doorAction('-50%', '100%', 2000);
  41.     }
  42.  
  43.     // 关门
  44.     function shutDoor() {
  45.         return doorAction('0%', '50%', 2000);
  46.     }
  47.  
  48.  
  49.     var instanceX;
  50.  
  51.     /**
  52.      * 小孩走路
  53.      * @param {[type]} container [description]
  54.      */
  55.     function BoyWalk() {
  56.  
  57.         var container = $("#content");
  58.         // 页面可视区域
  59.         var visualWidth = container.width();
  60.         var visualHeight = container.height();
  61.  
  62.         // 获取数据
  63.         var getValue = function(className) {
  64.             var $elem = $('' + className + '');
  65.                 // 走路的路线坐标
  66.             return {
  67.                 height: $elem.height(),
  68.                 top: $elem.position().top
  69.             };
  70.         };
  71.         // 路的Y轴
  72.         var pathY = function() {
  73.             var data = getValue('.a_background_middle');
  74.             return data.top + data.height / 2;
  75.         }();
  76.  
  77.         var $boy = $("#boy");
  78.         var boyWidth = $boy.width();
  79.         var boyHeight = $boy.height();
  80.  
  81.         //设置下高度    
  82.         $boy.css({
  83.             top: pathY - boyHeight + 25
  84.         });
  85.  
  86.         // 暂停走路
  87.         function pauseWalk() {
  88.             $boy.addClass('pauseWalk');
  89.         }
  90.  
  91.         // 恢复走路
  92.         function restoreWalk() {
  93.             $boy.removeClass('pauseWalk');
  94.         }
  95.  
  96.         // css3的动作变化
  97.         function slowWalk() {
  98.             $boy.addClass('slowWalk');
  99.         }
  100.  
  101.         // 用transition做运动
  102.         function stratRun(options, runTime) {
  103.             var dfdPlay = $.Deferred();
  104.             // 恢复走路
  105.             restoreWalk();
  106.             // 运动的属性
  107.             $boy.transition(
  108.                 options,
  109.                 runTime,
  110.                 'linear',
  111.                 function() {
  112.                     dfdPlay.resolve(); // 动画完成
  113.                 });
  114.             return dfdPlay;
  115.         }
  116.  
  117.         // 开始走路
  118.         function walkRun(time, dist, disY) {
  119.             time = time || 3000;
  120.             // 脚动作
  121.             slowWalk();
  122.             // 开始走路
  123.             var d1 = stratRun({
  124.                 'left': dist + 'px',
  125.                 'top': disY ? disY : undefined
  126.             }, time);
  127.             return d1;
  128.         }
  129.  
  130.  
  131.         // 走进商店
  132.         function walkToShop(runTime) {
  133.             var defer = $.Deferred();
  134.             var doorObj = $('.door')
  135.             // 门的坐标
  136.             var offsetDoor = doorObj.offset();
  137.             var doorOffsetLeft = offsetDoor.left;
  138.             // 小孩当前的坐标
  139.             var offsetBoy = $boy.offset();
  140.             var boyOffetLeft = offsetBoy.left;
  141.  
  142.             // 当前需要移动的坐标
  143.             instanceX = (doorOffsetLeft + doorObj.width() / 2) - (boyOffetLeft + $boy.width() / 2);
  144.  
  145.             // 开始走路
  146.             var walkPlay = stratRun({
  147.                 transform: 'translateX(' + instanceX + 'px),scale(0.3,0.3)',
  148.                 opacity: 0.1
  149.             }, 2000);
  150.             // 走路完毕
  151.             walkPlay.done(function() {
  152.                 $boy.css({
  153.                     opacity: 0
  154.                 })
  155.                 defer.resolve();
  156.             })
  157.             return defer;
  158.         }
  159.  
  160.         // 走出店
  161.         function walkOutShop(runTime) {
  162.             var defer = $.Deferred();
  163.             restoreWalk();
  164.             // 开始走路
  165.             var walkPlay = stratRun({
  166.                 transform: 'translateX(' + instanceX + 'px),translateY(0),,scale(1,1)',
  167.                 opacity: 1
  168.             }, runTime);
  169.             // 走路完毕
  170.             walkPlay.done(function() {
  171.                 defer.resolve();
  172.             })
  173.             return defer;
  174.         }
  175.  
  176.  
  177.         // 取花
  178.         function talkFlower() {
  179.             // 增加延时等待效果
  180.             var defer = $.Deferred();
  181.             setTimeout(function() {
  182.                 // 取花
  183.                 $boy.addClass('slowFlolerWalk');
  184.                 defer.resolve();
  185.             }, 1000);
  186.             return defer;
  187.         }
  188.  
  189.         // 计算移动距离
  190.         function calculateDist(direction, proportion) {
  191.             return (direction == "x" ?
  192.                 visualWidth : visualHeight) * proportion;
  193.         }
  194.  
  195.         return {
  196.             // 开始走路
  197.             walkTo: function(time, proportionX, proportionY) {
  198.                 var distX = calculateDist('x', proportionX)
  199.                 var distY = calculateDist('y', proportionY)
  200.                 return walkRun(time, distX, distY);
  201.             },
  202.             // 走进商店
  203.             toShop: function() {
  204.                 return walkToShop.apply(null, arguments);
  205.             },
  206.             // 走出商店
  207.             outShop: function() {
  208.                 return walkOutShop.apply(null, arguments);
  209.             },
  210.             // 停止走路
  211.             stopWalk: function() {
  212.                 pauseWalk();
  213.             },
  214.             setColoer: function(value) {
  215.                 $boy.css('background-color', value);
  216.             },
  217.             // 取花
  218.             talkFlower: function() {
  219.                 return talkFlower();
  220.             }
  221.  
  222.         }
  223.     }
  1. /////////
  2. //页面滑动 //
  3. /////////
  4.  
  5.  
  6. /**
  7.  * [Swipe description]
  8.  * @param {[type]} container [页面容器节点]
  9.  * @param {[type]} options   [参数]
  10.  */
  11. function Swipe(container) {
  12.     // 获取第一个子节点
  13.     var element = container.find(":first");
  14.     var swipe = {};
  15.  
  16.     // li页面数量
  17.     var slides = element.find("li");
  18.  
  19.     // 获取容器尺寸
  20.     var width = container.width();
  21.     var height = container.height();
  22.  
  23.     // 设置li页面总宽度
  24.     element.css({
  25.         width: (slides.length * width) + 'px',
  26.         height: height + 'px'
  27.     })
  28.  
  29.     // 设置每一个页面li的宽度
  30.     $.each(slides, function(index) {
  31.         var slide = slides.eq(index); // 获取到每一个li元素    
  32.         slide.css({
  33.             width: width + 'px',
  34.             height: height + 'px'
  35.         });
  36.     });
  37.  
  38.     // 监控完成与移动
  39.     swipe.scrollTo = function(x, speed) {
  40.         // 执行动画移动
  41.         element.css({
  42.             'transition-timing-function' : 'linear',
  43.             'transition-duration'        : speed + 'ms',
  44.             'transform'                  : 'translate3d(-' + x + 'px,0px,0px)'
  45.         });
  46.         return this;
  47.     }
  48.  
  49.     return swipe;
  50. }
  1. * {
  2.        padding: 0;
  3.        margin: 0;
  4.    }
  5.  
  6.    ol,
  7.    ul,
  8.    li {
  9.        list-style-type: none;
  10.    }
  11.    /*主体部分*/
  12.  
  13.    #content {
  14.        width: 100%;
  15.        height: 100%;
  16.        /* top: 20%; */
  17.        overflow: hidden;
  18.        position: absolute;
  19.    }
  20.  
  21.    .content-wrap {
  22.        position: relative;
  23.    }
  24.  
  25.    .content-wrap > li {
  26.        background: #CAE1FF;
  27.        color: red;
  28.        float: left;
  29.        overflow: hidden;
  30.        position: relative;
  31.    }
  32.  
  33.    li:nth-child(2) {
  34.        background: #9BCD9B;
  35.    }a
  36.  
  37.    li:nth-child(3) {
  38.        background: yellow;
  39.    }
  40.  
  41.    a {
  42.        position: absolute;
  43.        top: 50%;
  44.        left: 40%;
  45.    }
  46.  
  47.    .charector {
  48.        position: absolute;
  49.        left: 0%;
  50.        top: 55%;
  51.        position: absolute;
  52.        width: 100%;
  53.        height: 100%;
  54.        width: 151px;
  55.        height: 291px;
  56.        background: url(http://img.mukewang.com/55ade248000198ae10550582.png) -0px -291px no-repeat;
  57.    }
  58.    /*人物暂停*/
  59.  
  60.    .pauseWalk {
  61.        -webkit-animation-play-state: paused;
  62.    }
  63.  
  64.    .slowWalk {
  65.        -webkit-animation-name: person-slow;
  66.        -webkit-animation-duration: 950ms;
  67.        -webkit-animation-iteration-count: infinite;
  68.        -webkit-animation-timing-function: steps(1, start);
  69.        -moz-animation-name: person-slow;
  70.        -moz-animation-duration: 950ms;
  71.        -moz-animation-iteration-count: infinite;
  72.        -moz-animation-timing-function: steps(1, start)
  73.    }
  74.  
  75.    .slowFlolerWalk {
  76.        -webkit-animation-name: person-floler-slow;
  77.        -webkit-animation-duration: 950ms;
  78.        -webkit-animation-iteration-count: infinite;
  79.        -webkit-animation-timing-function: step-start;
  80.        -moz-animation-name: person-floler-slow;
  81.        -moz-animation-duration: 950ms;
  82.        -moz-animation-iteration-count: infinite;
  83.        -moz-animation-timing-function: step-start;
  84.    }
  85.    /*普通慢走*/
  86.  
  87.    @-webkit-keyframes person-slow {
  88.        0% {
  89.            background-position: -0px -291px;
  90.        }
  91.        25% {
  92.            background-position: -602px -0px;
  93.        }
  94.        50% {
  95.            background-position: -302px -291px;
  96.        }
  97.        75% {
  98.            background-position: -151px -291px;
  99.        }
  100.        100% {
  101.            background-position: -0px -291px;
  102.        }
  103.    }
  104.  
  105.    @-moz-keyframes person-slow {
  106.        0% {
  107.            background-position: -0px -291px;
  108.        }
  109.        25% {
  110.            background-position: -602px -0px;
  111.        }
  112.        50% {
  113.            background-position: -302px -291px;
  114.        }
  115.        75% {
  116.            background-position: -151px -291px;
  117.        }
  118.        100% {
  119.            background-position: -0px -291px;
  120.        }
  121.    }
  122.    /*带花*/
  123.  
  124.    @-webkit-keyframes person-floler-slow {
  125.        0% {
  126.            background-position: -453px -0px;
  127.        }
  128.        25% {
  129.            background-position: -904px -0px;
  130.        }
  131.        50% {
  132.            background-position: -451px -0px;
  133.        }
  134.        75% {
  135.            background-position: -753px -0px;
  136.        }
  137.        100% {
  138.            background-position: -300px -0px;
  139.        }
  140.    }
  141.  
  142.    @-moz-keyframes person-floler-slow {
  143.        0% {
  144.            background-position: -453px -0px;
  145.        }
  146.        25% {
  147.            background-position: -904px -0px;
  148.        }
  149.        50% {
  150.            background-position: -451px -0px;
  151.        }
  152.        75% {
  153.            background-position: -753px -0px;
  154.        }
  155.        100% {
  156.            background-position: -300px -0px;
  157.        }
  158.    }
  1. /*背景图*/
  2.  
  3. .a_background {
  4.     width: 100%;
  5.     height: 100%;
  6.     /*    background-image: url("../images/QixiA.png");
  7.     background-size: 100% 100%;*/
  8.  
  9.     position: absolute;
  10. }
  11.  
  12. .a_background_top {
  13.     width: 100%;
  14.     height: 71.6%;
  15.     background-image: url("http://img1.sycdn.imooc.com//55addf6900019d8f14410645.png");
  16.     background-size: 100% 100%;
  17. }
  18.  
  19. .a_background_middle {
  20.     width: 100%;
  21.     height: 13.1%;
  22.     background-image: url("http://img1.sycdn.imooc.com//55addf800001ff2e14410118.png");
  23.     background-size: 100% 100%;
  24. }
  25.  
  26. .a_background_botton {
  27.     width: 100%;
  28.     height: 15.3%;
  29.     background-image: url("http://img1.sycdn.imooc.com//55addfcb000189b314410138.png");
  30.     background-size: 100% 100%;
  31. }
  32.  
  33. button {
  34.     width: 80px;
  35.     height: 50px;
  36. }
  37.  
  38. .button {
  39.     position: absolute;
  40.     bottom: 0;
  41. }
  42. /*人物暂停*/
  43.  
  44. .pauseWalk {
  45.     animation-play-state: paused;
  46. }
  47. /*-------- 太阳自转以及动画 --------*/
  48.  
  49. #sun {
  50.     background: url("http://img1.sycdn.imooc.com//55ade004000106c202010201.png") no-repeat;
  51.     position: absolute;
  52.     z-index: 1;
  53.     top: -30px;
  54.     height: 201px;
  55.     width: 201px;
  56.     right: 40%;
  57. }
  58.  
  59. .rotation {
  60.     -webkit-animation-name: rotation;
  61.     -webkit-animation-duration: 30s;
  62.     -webkit-animation-iteration: 1;
  63.     -moz-animation-name: rotation;
  64.     -moz-animation-duration: 30s;
  65.     -moz-animation-iteration: 1;
  66. }
  67.  
  68. @-webkit-keyframes rotation {
  69.     0% {
  70.         transform: translateX(0) translateY(0);
  71.     }
  72.     100% {
  73.         transform: translateX(-2000px) translateY(400px);
  74.     }
  75. }
  76.  
  77. @-moz-keyframes rotation {
  78.     0% {
  79.         transform: translateX(0) translateY(0);
  80.     }
  81.     100% {
  82.         transform: translateX(-2000px) translateY(400px);
  83.     }
  84. }
  85. /*天空云*/
  86.  
  87. .cloud {
  88.     z-index: 2;
  89.     position: absolute;
  90. }
  91.  
  92. .cloud1 {
  93.     width: 20%;
  94.     height: 30%;
  95.     left: -5%;
  96.     top: 15%;
  97.     background: url("http://img1.sycdn.imooc.com//55addfde0001aec501810101.png") no-repeat;
  98.     -webkit-animation-name: smallCloud;
  99.     -webkit-animation-duration: 30s;
  100.     -webkit-animation-iteration: infinite;
  101.     -moz-animation-name: smallCloud;
  102.     -moz-animation-duration: 30s;
  103.     -moz-animation-iteration: infinite
  104. }
  105.  
  106. .cloud2 {
  107.     width: 20%;
  108.     height: 30%;
  109.     right: -5%;
  110.     background: url("http://img1.sycdn.imooc.com//55addff500016df503010140.png") no-repeat;
  111.     -webkit-animation-name: largeCloud;
  112.     -webkit-animation-duration: 60s;
  113.     -webkit-animation-iteration: infinite;
  114.     -moz-animation-name: largeCloud;
  115.     -moz-animation-duration: 60s;
  116.     -moz-animation-iteration: infinite;
  117. }
  118.  
  119. @-webkit-keyframes smallCloud {
  120.     0% {
  121.         left: -5%;
  122.     }
  123.     100% {
  124.         left: 100%;
  125.     }
  126. }
  127.  
  128. @-moz-keyframes smallCloud {
  129.     0% {
  130.         left: -5%;
  131.     }
  132.     100% {
  133.         left: 100%;
  134.     }
  135. }
  136.  
  137. @-webkit-keyframes largeCloud {
  138.     0% {
  139.         right: -5%;
  140.     }
  141.     100% {
  142.         right: 100%;
  143.     }
  144. }
  145.  
  146. @-moz-keyframes largeCloud {
  147.     0% {
  148.         right: -5%;
  149.     }
  150.     100% {
  151.         right: 100%;
  152.     }
  153. }
  1. /*背景图*/
  2.  
  3. .b_background {
  4.     width: 100%;
  5.     height: 100%;
  6.     background-image: url("http://img1.sycdn.imooc.com//55ade06f00015a0d14410901.png");
  7.     background-size: 100% 100%;
  8.     position: absolute;
  9. }
  10.  
  11. .b_background_preload {
  12.     background: url("http://img1.sycdn.imooc.com//55ade0be0001a37914410901.png") no-repeat -9999px -9999px;
  13. }
  14.  
  15. .lamp-bright {
  16.    background-image: url("http://img1.sycdn.imooc.com//55ade0be0001a37914410901.png");
  17. }
  18.  
  19.  
  20. /*商店*/
  21.  
  22. .shop {
  23.     width: 39.5%;
  24.     height: 35.5%;
  25.     position: absolute;
  26.     left: 29%;
  27.     top: 36.5%;
  28. }
  29.  
  30. .door {
  31.     position: absolute;
  32.     width: 32%;
  33.     height: 100%;
  34.     top: 32%;
  35.     height: 68%;
  36.     overflow: hidden;
  37.     left: 58.5%;
  38. }
  39.  
  40. .door-left,
  41. .door-right {
  42.     width: 50%;
  43.     height: 100%;
  44.     position: absolute;
  45. }
  46.  
  47. .door-left {
  48.     left: 0%;
  49.     background: url(http://img.mukewang.com/55ade1140001050d00910231.png);
  50.     background-size: 100% 100%;
  51. }
  52.  
  53. .door-right {
  54.     left: 50%;
  55.     background: url(http://img.mukewang.com/55ade12100019f5b00910231.png);
  56.     background-size: 100% 100%;
  57. }
  58.  
  59. /*鸟*/
  60.  
  61. .bird {
  62.     min-width: 91px;
  63.     min-height: 71px;
  64.     top: 10%;
  65.     position: absolute;
  66.     z-index: 10;
  67.     right: -91px;
  68.     background: url(http://img.mukewang.com/55ade1700001b38302730071.png) -182px 0px no-repeat;
  69. }
  70. .birdFly {
  71.     -webkit-animation-name: bird-slow;
  72.     -webkit-animation-duration: 400ms;
  73.     -webkit-animation-timing-function: step-start;
  74.     -webkit-animation-iteration-count: infinite;
  75.     -moz-animation-name: bird-slow;
  76.     -moz-animation-duration: 400ms;
  77.     -moz-animation-timing-function: step-start;
  78.     -moz-animation-iteration-count: infinite;
  79. }
  80.  
  81.  
  82. /*鸟慢飞*/
  83. @-webkit-keyframes bird-slow {
  84.     /* 鸟飞的动作 */
  85.  
  86. }
  87.  
  88. @-moz-keyframes bird-slow {
  89.     /* 鸟飞的动作 */
  90.  
  91. }
下一节