steps 动画 理解

steps动画的 帧和步数的理解

首先设定动画 steps() 里面的第一个参数 作用于每两个关键帧(就是0-25-50-75-100%)之间，而不是整个动画
第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end

 div {
            position: absolute;
            bottom: 0;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            /* 我们元素可以添加多个动画， 用逗号分隔 */
            animation: bear .4s steps(8) infinite, move 3s forwards;
        }
@keyframes animate_show{
           0% {
                background-position: 0 0;
            }
            
			100%{
                background-position: -1600px 0;

			}
        }

比如 这个就是0-100这个关键字 中 平均分了8步完成了最后的移动 也就是每步移动200px