代码改变世界

animation-timing-function:steps() Sprite 精灵动画

2016-01-19 16:37  孤独大兔子  阅读(171)  评论(0)    收藏  举报

看到一篇文章，学到一个属性，就是使用一张含有多帧静态画面的图片，通过切换 background-position 使其变为连续的动画。

图片直接拿来别人的来用了

先上代码

<div class="sprite"></div>  
.sprite {
    width:245px;
  height:400px;
  display:block;    
  background:transparent url(http://www.w3cplus.com/sites/default/files/blogs/2015/1506/walker.png) 0 0 no-repeat;  
 margin:3em auto;
  animation: walker 1s steps(5) infinite;
}


@keyframes walker {
  from {background-position:0 0;}
  to {background-position:0 -4000px;}
}

steps() 第一个参数 number 为指定的间隔数，即把动画分为 n 步阶段性展示，第二个参数默认为 end，设置最后一步的状态，start 为结束时的状态，end 为开始时的状态。

实现效果只能上gif图了