CSS3動(dòng)畫中的steps(),制作人物行走動(dòng)畫

標(biāo)簽：

Html/CSS CSS3

steps()是css3动画属性animation-timing-function的其中一个值，语法为：
steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
于是制作人物行走的动画有以下两种写法：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .animate {
                width: 88.83333333333333px;
                height: 54px;
                margin: 10px auto;
                overflow: hidden;
            }
            .animate img{
                width: 533px;
                height: 54px;
            }

            /**第一种和写法，动画分为6个阶段，每个阶段之前1步切换**/
            .animate01 img{
                -webkit-animation: animate01 1s steps(1)  infinite;
            }
            @-webkit-keyframes animate01 {
                0% {
                    transform: translateX(0);
                }
                16.7% {
                    transform: translateX(-90px);
                }
                33.4% {
                    transform: translateX(-180px);
                }
                50.1% {
                    transform: translateX(-270px);
                }
                67.8% {
                    transform: translateX(-360px);
                }
                84.5% {
                    transform: translateX(-450px);
                }
                100% {
                    transform: translateX(-533px);
                }
            }
                        /**第二种和写法，动画仅有1个阶段，但需要切换6步来完成，也就是说把每个阶段的计算过程交给css去做**/
            .animate02 img{
                -webkit-animation: animate02 1s steps(6, end)  infinite;
            }

            @-webkit-keyframes animate02 {
                0% {
                    transform: translateX(0);
                }

                100% {
                    transform: translateX(-533px);
                }
            }
        </style>
    </head>

    <body>
        <div class="animate animate01">
               <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://img1.sycdn.imooc.com//598c230d0001657c05330054.png"/>
              </div>
        <div class="animate animate02">
                 <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://img1.sycdn.imooc.com//598c230d0001657c05330054.png"/>
                </div>
    </body>

</html>

點(diǎn)擊查看更多內(nèi)容