如何降低CSS精灵动画中最后几帧的速度？

我有一个CSS精灵动画

我希望动画在停止之前放慢速度

我总共有10帧
帧1-5应为0.8s，帧6-7应为2s，帧8-10应为3s

.hi3 {
  width: 73px;
  height: 75px;
  background-image: url("../img/dice3.fw.png");

  -webkit-animation: play .8s steps(10) forwards;
     -moz-animation: play .8s steps(10) infinite;
      -ms-animation: play .8s steps(10) infinite;
       -o-animation: play .8s steps(10) infinite;
          animation: play .8s steps(10) forwards;   
}

@-webkit-keyframes play {
   from { background-position:    0px; }
   to { background-position: -722px; }
}

@keyframes play {
  from { background-position:    0px; }
  to { background-position: -722px; }
}

有可能在CSS中完成这一切吗？该动画正在混合离子应用程序中使用

我总共有10帧。帧1-5应为0.8s，帧6-7应为2s，帧8-10应为3s。有可能在CSS中完成这一切吗

是，这是可能的，但为此，需要修改关键帧，并且应相应地对关键帧进行编码。

步骤

函数根据作为参数提供的步骤数将帧划分为等距步骤，并从一个步骤跳到另一个步骤

以下是MDN对此的看法：

steps（）函数表示法定义了一个step函数，该函数以等距步长划分输出值的域

由于上述原因，

steps（）

函数无法用于创建所需的效果（因为每个步骤都是等距的，因此具有相同的计时）

---

解决方案：

以下是获得所需输出所需的操作：

• 根据您的期望计算总的

  动画持续时间。我的解释是，前5帧（4s）中的每一帧都需要.8s，接下来的两帧（4s）需要2s，接下来的三帧（9s）需要3s，因此总的
  动画持续时间应设置为17s。（注意：或者，如果您的意思是所有前5帧应在0.8s内完成，依此类推，则持续时间将为5.8s）

• 将

  动画计时功能

  更改为

  线性

  ，因为

  步骤（）

  功能将无法如上所述工作
• 根据每帧的秒数和动画的总持续时间，计算

  @关键帧的分割。公式为（帧/总持续时间的秒数*100），因此前5帧大约需要出现在4.70%的动画中，接下来2帧出现在11.76%的动画中，最后3帧出现在17.64%的动画中。（注意：如果您寻找的是5.8秒的持续时间，则拆分会发生变化）

• 现在根据拆分，编写

  @关键帧

  选择器（百分比值）。在编写关键帧选择器时要注意的一点是，精灵动画通常应该从一帧跳到另一帧（而不是线性滑动运动），因此，每个帧都应该显示，直到必须显示下一帧为止。例如，帧2必须显示在

  4.70%

  处，因此帧1的

  背景位置应保持在
  0%
  到
  4.69%
  之间

---

持续时间为17秒的演示：（前5帧各为0.8秒，后2帧各为2秒，后3帧各为3秒）

。您好{
宽度：50px；
高度：72px；
背景图像：url（“http://s.cdpn.io/79/sprite-steps.png");
动画：播放17秒线性无限；
}
@关键帧播放{
0%，4.69%{/*0.8s*/
背景位置：0px；
}
4.70%，9.39%{/*0.8s*/
背景位置：-50px；
}
9.40%，14.09%{/*0.8s*/
背景位置：-100px；
}
14.10%，18.79%{/*0.8s*/
背景位置：-150px；
}
18.80%，23.49%{/*0.8s*/
背景位置：-200px；
}
23.5%，35.25%{/*2s*/
背景位置：-250px；
}
35.26%，47.01%{/*2s*/
背景位置：-300px；
}
47.02%，64.65%{/*3s*/
背景位置：-350px；
}
64.66%，82.29%{/*3s*/
背景位置：-400px；
}
82.3%，100%{/*3s*/
背景位置：-450px；
}
}

---

这就是你需要的（或者）你的问题不同吗？谢谢Harry，这就是我想要的。