css - 使用 CSS 动画对图像进行动画处理

Question

是否可以仅使用 CSS 动画创建高质量的动画图像（如 gif），例如每 40 毫秒设置一次 background-position-y 值？

我知道使用 javascript 可以做到这一点，但如果大多数浏览器都支持这种做法，我宁愿只使用 CSS。

这是我要制作动画的图像示例：

http://i.stack.imgur.com/76EMV.jpg

Answer 1

这可以通过使用keyframes play和animation在 CSS 下完成。您必须使用您希望保留的 FPS 来操作每一帧的背景位置，并且您将获得动画图像。

例如，

1.确定背景位置

@keyframes play {
   from { background-position:    xxpx; }
     to { background-position: xxpx; }
} 

2.让它播放，你想要的秒数，步骤和循环

    .class-name{
      -webkit-animation: play .xx steps(xx) infinite;
      -moz-animation: play .xx steps(xx) infinite;
      -ms-animation: play .xx steps(xx) infinite;
      -o-animation: play .xx steps(xx) infinite;
      animation: play .xx steps(xx) infinite;    }

PS： xx 是您要设置的任何数字的虚拟变量。

希望有帮助。