17-[案例3]利用动画实现背景图片运动

需求：使用静态图片帧，实现动画效果

知识点：图片整合技术（精灵图定位）、CSS动画属性、step-start

<div></div>

/* 1. 创建动画 */
@keyframes move{
    0%{background-position: 0 0;}
    14%{background-position: -180px 0;}
    28%{background-position: -360px 0;}
    42%{background-position: -540px 0;}
    56%{background-position: -720px 0;}
    70%{background-position: -900px 0;}
    84%{background-position: -1080px 0;}
    100%{background-position: -1260px 0;}
}
div{
    width: 180px;
    height: 300px;
    background: url(1.png);
    /* 2. 调用动画 */
    /* step-start/step-end 表示运动只要开始和结束的状态，不要中间的过程 */
    animation: move .5s infinite step-start;
}