如何减慢 CSS 精灵动画中的最后几帧？

Question

我有一个 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 中完成这一切？此动画正在混合 IONIC 应用程序中使用。

Answer 1

I have a total of 10 Frames. Frame 1-5 should be 0.8s, Frame 6-7 should be 2s and Frame 8-10 should be 3s. Is it possible to do this all in CSS?

是，这是可能的，但为此需要修改animation-timing-function并相应地编码@keyframes。 steps函数根据序号将帧分成等距的steps。作为参数提供并从一步跳到另一步的步骤数。

以下是 MDN 对此的评价 timing-function:

The steps() functional notation defines a step function dividing the domain of output values in equidistant steps.

由于上述原因，steps() 函数不能用于创建您正在寻找的效果（因为每一步都是等距的，因此具有相同的时间）。

解法：

为了获得您正在寻找的输出，需要完成以下操作：

根据您的预期计算总数 animation-duration。我的解释是前 5 帧（4 秒）中的每一帧都需要 0.8 秒，接下来的两帧（4 秒）需要 2 秒，接下来的三帧（9 秒）需要 3 秒，因此总 animation-duration 应该设置为 17 秒. （注意：另外，如果你的意思是前5帧都应该在0.8秒内完成等等，那么持续时间就是5.8秒）。
将animation-timing-function更改为linear，因为steps()功能将无法像上面提到的那样工作。
根据编号计算 @keyframes 的拆分。每帧的秒数和动画的总持续时间。公式为（帧的秒数/总持续时间 * 100），因此前 5 帧大致需要出现在动画的 4.70% 中，接下来的 2 帧为 11.76%，最后 3 帧为 17.64%。（注意： 如果您正在寻找 5.8 秒的持续时间，拆分会发生变化）。
现在根据拆分，编写 @keyframes 选择器（百分比值）。编写关键帧选择器时要注意的关键是精灵动画通常应该从一帧跳到另一帧（而不是线性滑动），因此，每一帧都应该显示到下一帧必须显示的时间。例如，第 2 帧必须显示在 4.70%，因此第 1 帧的 background-position 应从 0% 保持到 4.69%。

持续时间为 17 秒的演示： ^{（前 5 帧各获得 0.8 秒，接下来的 2 帧各获得 2 秒，最后 3 帧各获得3s)}

.hi {
  width: 50px;
  height: 72px;
  background-image: url("http://s.cdpn.io/79/sprite-steps.png");
  animation: play 17s linear infinite;
}
@keyframes play {
  0%, 4.69% {     /* 0.8s */
    background-position: 0px;
  }
  4.70%, 9.39% {  /* 0.8s */
    background-position: -50px;
  }
  9.40%, 14.09% { /* 0.8s */
    background-position: -100px;
  }
  14.10%, 18.79% { /* 0.8s */
    background-position: -150px;
  }
  18.80%, 23.49% { /* 0.8s */
    background-position: -200px;
  }
  23.5%, 35.25% {  /* 2s */
    background-position: -250px;
  }
  35.26%, 47.01% { /* 2s */
    background-position: -300px;
  }
  47.02%, 64.65% { /* 3s */
    background-position: -350px;
  }
  64.66%, 82.29% { /* 3s */
    background-position: -400px;
  }
  82.3%, 100% { /* 3s */
    background-position: -450px;
  }
}

<img src="http://s.cdpn.io/79/sprite-steps.png" />
<div class="hi"></div>

时长5.8秒的演示： ^{（前5帧共0.8秒，后2帧共2秒，最后3帧3秒总计)}

.hi {
  width: 50px;
  height: 72px;
  background-image: url("http://s.cdpn.io/79/sprite-steps.png");
  animation: play 5.8s linear infinite;
}
@keyframes play {
  0%, 2.74% {     /* 0.16s */
    background-position: 0px;
  }
  2.75%, 5.49% {  /* 0.16s */
    background-position: -50px;
  }
  5.50%, 8.24% { /* 0.16s */
    background-position: -100px;
  }
  8.25%, 10.99% { /* 0.16s */
    background-position: -150px;
  }
  11.00%, 13.74% { /* 0.16s */
    background-position: -200px;
  }
  13.75%, 30.99% {  /* 1s */
    background-position: -250px;
  }
  31.00%, 48.24% { /* 1s */
    background-position: -300px;
  }
  48.25%, 65.49% { /* 1s */
    background-position: -350px;
  }
  65.50%, 82.74% { /* 1s */
    background-position: -400px;
  }
  82.75%, 100% { /* 3s */
    background-position: -450px;
  }
}

<img src="http://s.cdpn.io/79/sprite-steps.png" />
<div class="hi"></div>

Disclaimer: The sprite image is not my own and it was adapted from this fiddle found through Google search.

如何减慢 CSS 精灵动画中的最后几帧？

How to slow down the last few frames in a CSS sprite animation?

css

css-sprites

css-animations