html - 如何让CSS动画跳跃而不是滑动

Question

我有以下动画... http://jsfiddle.net/5vwjy/1/

编辑:为所有浏览器更新了 fiddle ... http://jsfiddle.net/5vwjy/2/

使用以下 CSS...

.box {
  display:block;
  width:240px;
  height:100px;
 background: red url("http://southwestphotobooths.co.uk/sites/all/themes/SWPB/images/check_availability.png") no-repeat;
  text-indent:-9999px;
  position:absolute;
  -webkit-animation-name: change;
  -webkit-animation-duration: 10s;
  -webkit-animation-timing-function: steps(21);
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
}

@-webkit-keyframes change {

  0%    {top:0px;left:0px;background-position: 0px 0px;}
  5%    {top:0px;left:0px;background-position: -240px 0px;}
  10%   {top:0px;left:0px;background-position: -480px 0px;}
  15%   {top:0px;left:0px;background-position: -720px 0px;}
  20%   {top:0px;left:0px;background-position: -960px 0px;}
  25%   {top:0px;left:0px;background-position: -1200px 0px;}
  30%   {top:0px;left:0px;background-position: -1440px 0px;}
  35%   {top:0px;left:0px;background-position: -1680px 0px;}
  40%   {top:0px;left:0px;background-position: -1920px 0px;}
  45%   {top:0px;left:0px;background-position: -2160px 0px;}
  50%   {top:0px;left:0px;background-position: -2400px 0px;}
  55%   {top:0px;left:0px;background-position: -2640px 0px;}
  60%   {top:0px;left:0px;background-position: -2880px 0px;}
  65%   {top:0px;left:0px;background-position: -3120px 0px;}
  70%   {top:0px;left:0px;background-position: -3360px 0px;}
  75%   {top:0px;left:0px;background-position: -3600px 0px;}
  80%   {top:0px;left:0px;background-position: -3840px 0px;}
  85%   {top:0px;left:0px;background-position: -4080px 0px;}
  90%   {top:0px;left:0px;background-position: -4080px 0px;}
  95%   {top:0px;left:0px;background-position: -4080px 0px;}
  100%  {top:0px;left:0px;background-position: -4080px 0px;}

}

它的工作超过 21 个步骤，使用非常宽的 png 作为基于背景位置的框架。

我只能让动画补间，而不是分阶段跳转。

如何让它从一帧跳到另一帧，而不是滑动？

Answer 1

像这样修改你的 CSS:

-webkit-animation-timing-function: steps(1);
-moz-animation-timing-function: steps(1);
animation-timing-function: steps(1);

用不同的值调整它们以获得所需的动画，目前它们在 21 帧的每一帧显示和停止。 JSFiddle 在这里:CLICK