css - CSS Keyframe Animation Similar to Stop Motion

Question

I need to use keyframe animations to move the background-position of a sprite sheet. However, I do not want animations, I want a hard frame by frame look, similar to a gif.

Any ideas how to achieve this?

Thanks so much!

Answer 1

关键是 CSS 计时功能。定格帧对应于 step 函数。

animation-timing-function: steps(n);

代码示例：css定格动画

演示

Answer 2

是的，但是您可以使用 JavaScript 更漂亮地实现这一点：

@-webkit-keyframes sprite {
  0%    { background-position: 0px 0px; }
  25%   { background-position: 0px 0px; }
  25.1% { background-position: -200px 0px; }
  50%   { background-position: -200px 0px; }
  50.1% { background-position: -400px 0px; }
  75%   { background-position: -400px 0px; }
  75.1% { background-position: -400px -200px; }
  99.9% { background-position: -400px -200px; }
  100%  { background-position: 0px 0px; }
}

@-moz-keyframes sprite {
  0%    { background-position: 0px 0px; }
  25%   { background-position: 0px 0px; }
  25.1% { background-position: -200px 0px; }
  50%   { background-position: -200px 0px; }
  50.1% { background-position: -400px 0px; }
  75%   { background-position: -400px 0px; }
  75.1% { background-position: -400px -200px; }
  99.9% { background-position: -400px -200px; }
  100%  { background-position: 0px 0px; }
}

@-o-keyframes sprite {
  0%    { background-position: 0px 0px; }
  25%   { background-position: 0px 0px; }
  25.1% { background-position: -200px 0px; }
  50%   { background-position: -200px 0px; }
  50.1% { background-position: -400px 0px; }
  75%   { background-position: -400px 0px; }
  75.1% { background-position: -400px -200px; }
  99.9% { background-position: -400px -200px; }
  100%  { background-position: 0px 0px; }
}

@keyframes sprite {
  0%    { background-position: 0px 0px; }
  25%   { background-position: 0px 0px; }
  25.1% { background-position: -200px 0px; }
  50%   { background-position: -200px 0px; }
  50.1% { background-position: -400px 0px; }
  75%   { background-position: -400px 0px; }
  75.1% { background-position: -400px -200px; }
  99.9% { background-position: -400px -200px; }
  100%  { background-position: 0px 0px; }
}
    
div.image {
  background: url('https://i.stack.imgur.com/lwOaY.jpg');
  width: 200px;
  height: 200px;
  -webkit-animation: 5s sprite infinite;
  -moz-animation: 5s sprite infinite;
  -o-animation: 5s sprite infinite;
  animation: 5s sprite infinite;
}

<div class='image'></div>

Answer 3

如果你真的只需要使用关键帧动画，我想到的一个想法是：

@keyframes youranim {
    0%     { top: 0px;   }
    24.99% { top: 0px;   }
    25%    { top: 200px; }
    49.99% { top: 200px; }
    50%    { top: 400px; }
    74.99% { top: 400px; }
    75%    { top: 600px; } /* and so on... */
}

我读到十进制值对于 CSS3 关键帧是可以的。