CSS3中animation中的steps()逐帧动画

    首先我们先看一下效果图

    //这里是HTML代码    <div class="birdBox">        <div class="bird"></div>    </div>    //这里是css代码    *{margin: 0;padding: 0;}    html ,body{        width: 100%;        height: 100%;    }    body{    /* background-image: url('000.jpg'); */        /* background-size: 100% 100%; */        background: url('000.jpg') no-repeat 100% / 100%;    }    .bird{        width: 141px;        height: 85px;        background: url('bird.png');        animation: moveUp 1s steps(1) infinite;    }    .birdBox{         position: absolute;         width: 141px;         height: 85px;         top: 150px;         animation: birdsLine 20s  steps(90) infinite ;    }    @keyframes birdsLine {        0%{ left:0;transform: scalex(1)}        50%{ left: calc(100% - 141px );transform: scalex(1)}        50.001%{ left: calc(100% - 141px );transform: scalex(-1)}        100%{ left: 0; transform: scalex(-1)}    }    @keyframes moveUp{        0%{ background-position: -0px;}           12.5%{ background-position: -141px;}           25%{ background-position: -282px;}           37.5%{ background-position: -423px;}           50%{ background-position: -564px;}           62.5%{ background-position: -705px;}           75%{ background-position: -846px;}           87.5%{ background-position: -987px;}           100%{ background-position: -1128px;}    }首先这个demo并不是很难，只是简单的@keyframes，只不是在animation中animation-timing-function的属性值选择上选择steps()   steps(<integer>[, [ start | end ] ]?)：    接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。    更多的详解大家可以参考http://css.doyoe.com/

博主开通了一个关于前端分享的微信公众号，有兴趣的小伙伴欢迎关注：
公众号：简单的前端

不知道能不能推荐微信公众号，如有违反，请告知