问答详情
源自：3-3 自适应雪碧图

step 中设置 end 或 start 会造成什么差异吗？

    .birdFly {
        -webkit-animation:bird-slow 400ms steps(3,start) infinite;
    }
    
    @-webkit-keyframes bird-slow{
        0%{
            background-position: 0% 0%;
        }
        100%{
            background-position: -300% 0%;
        }
    }

step 中设置成 end 和 设置成 start 貌似没有什么区别，是因为循环播放的关系吗？

提问者：TWT 2016-05-17 19:45

个回答

  • CHIKE1978
    2016-05-19 15:21:32
    已采纳

    我的理解是

    end时 

    第一步background-position-x 是0%~-100% 执行

    第二步background-position-x 是-100%~-200% 执行

    第三步background-position-x 是-200%~-300%  不执行

    start时

    第一步background-position-x 是0%~-100%  不执行

    第二步background-position-x 是-100%~-200% 执行

    第三步background-position-x 是-200%~-300%  执行

    动画方向顺序不同

    0