Question

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

编辑：更新了所有浏览器的小提琴...... 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

<强> DEMO

使用css的这个属性：

animation-timing-function: step-end;

Answer 2

对你的css进行更改，如：

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

使用不同的值调整它们以获得所需的动画，目前它们显示并停止在21帧中的每一帧。 JSFiddle：CLICK

如何使CSS动画跳转而不是滑动

2 个答案: